0

、、<select>と呼ばれる 3 つのオプションを持つものがあります。スキーム＃の選択に基づいて、（スキーム1の場合）およびボタン（スキーム2の場合）を切り替える必要があります。selectScheme1Scheme2Checkboxesradio

ここに画像の説明を入力 ここに画像の説明を入力

ケース 1: オプションを選択して (と)のScheme12 つにチェックを入れた場合は問題ありません。BCcheckboxes

ケース 2:オプションを選択してボタンをScheme2チェックし、オプションを選択した場合。radioB

ここでもう一度選択するScheme1と、以前に選択した 2 つのチェック ボックス A と Bが失われ、選択すると、ラジオ ボタンからScheme2選択したオプションも失われました。B

どうすればこれを処理できますか。現在、毎回新しいチェックボックス リストとラジオ ボタン リストを描画しています。

チェックボックスとラジオボタンの両方の状態を維持するにはどうすればよいですか?

次のHTMLコードがあります

<html>
<head>
</head>
<body>

<select name="sltScheme" onchange="funCall(this.value)">
    <option value="select">Select Scheme</option>
    <option value="Scheme1">Scheme 1</option>
    <option value="Scheme2">Scheme 2</option>
</select>

<!-- will be displayed when Scheme 1 is selected but will be overwritten by Radio buttons-->
<div id="schemeContainer" style="display: block; visibility: visible;">
    <span id="ele_0">
        <input name="schemeType[]" type="checkbox" value="1">
    </span>
    <lable>A<br></lable>
    <span id="ele_1">
        <input name="schemeType[]" type="checkbox" value="2">
    </span>
    <lable>B<br></lable>
    <span id="ele_2">
        <input name="schemeType[]" type="checkbox" value="3">
    </span>
    <lable>C<br></lable>
</div>

<!--This separate DIV is just for illustration purpose only. Actually Radio buttons will be overwritten by Checkboxes and vice versa-->

<!-- will be displayed when Scheme 2 is selected but will be overwritten by Checkboxes-->
<div id="schemeContainer" style="display: block; visibility: visible;">
    <span id="ele_0">
        <input name="schemeType[]" type="radio" value="1">
    </span>
    <lable>A<br></lable>
    <span id="ele_1">
        <input name="schemeType[]" type="radio" value="2">
    </span>
    <lable>B<br></lable>
    <span id="ele_2">
        <input name="schemeType[]" type="radio" value="3">
    </span>
    <lable>C<br></lable>
</div>


</body>
</html>

そして、次のJavaScript/jQueryコードがあります（jQueryライブラリを追加したので、HTMLコードと混同しないでください）

<script>
    function funCall(schemeType)
    {
        var obj = jQuery("input[name='schemeType[]']");
        if(schemeType == "scheme1")
        {
            for(i=0;i<obj.length;i++)
            {
                var eleval = obj[i].value;
                jQuery("#ele_"+i).each(function(i) {
                    jQuery(this).html('<input value = "'+eleval+'" type="checkbox" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
                });
                obj[i].checked = false;
            }
        }
        else if(schemeType == "scheme2")
        {
            for(i=0;i<obj.length;i++)
            {
                jQuery("#ele_"+i).each(function(i) {
                    jQuery(this).html('<input value = "'+eleval+'"  type="radio" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
                });
            }
        }
    }
</script>

編集：

id属性を使用しているため、チェックボックスとラジオ ボタンの両方から属性を削除しましnameた。

編集2：

<div id="schemeContainer"ここでは、説明のみを目的として、同じ ID を持つ 2 つの div を示しています。実際には、DIV は 1 つだけで、2 つではありません。その単一の div のみでラジオとチェックボックスを置き換えます。

4

2 に答える 2

1

ここでいくつかのコードを変更する必要があります：

1)。div id（ラジオボタンコンテナのグループ）の変更

<div id="schemeContainer1" style="display: block; visibility: visible;">
    .......
</div>

2)。div id の変更 (チェック ボックス ボタン コンテナーのグループ)

<div id="schemeContainer2" style="display: block; visibility: visible;">
   .....
</div>

3)。JavaScript を変更して、セクションに基づいて非表示のラジオまたはチェック ボックス コンテナーを表示します。

function funCall(schemeType)
{
    if(schemeType == "Scheme1")
    {
        jQuery("#schemeContainer1").show();
        jQuery("#schemeContainer2").hide();
    }
    else if(schemeType == "Scheme2")
    {
        jQuery("#schemeContainer1").hide();
        jQuery("#schemeContainer2").show();
    }
    else
    {
        jQuery("#schemeContainer2").show();
        jQuery("#schemeContainer1").show();
    }
}
于 2013-05-28T10:35:08.940 に答える
1

HTMLコメントを正しく読んでいる場合、問題は2つのdivを持つことができないということではなく、フォームが最終的に送信されるときに両方のdivを送信したくないということです。私は Raskesh の解決策 (トグルを使用して既に選択されているオプションを表示および非表示にする) を検討しますが、非表示のフォーム要素を無効にし、表示されたときに有効にして、送信時に無効なフィールドセットがサーバーによって処理されないようにします。

また、HTML5 のみのソリューションに慣れている場合は、その中のすべての下位フォーム コントロールを無効fieldsetにする属性を使用できるようになり、disabledチェックボックスをループしてそれぞれを無効にする必要がなくなりました。

jquery のコードを軽くする方法は次のとおりです。交換可能なフォーム フィールドをすべて共有クラス ("swappable" など) でフィールドセットにラップし、それらを表示/非表示に設定します。次に、フィールドセットが表示/非表示にされるタイミングをリッスンする関数を作成し、a) HTML5 ブラウザーでフィールドセットを無効 (非表示の場合) または無効にしない (表示の場合) に設定し、フィールドセットの子孫であるすべてのフォーム フィールド タイプのセレクターも備えています。非表示でスワップ可能なクラスを持ち、特定のフィールドの無効な属性も設定/設定解除します。スワップ可能なすべてのラッパーにクラスを使用することで、フィールドの選択が容易になるだけでなく、意図的に非表示になっているフィールドを誤って無効にすることを回避できます。modernizr を組み込む場合、fieldset が disabled 属性を受け入れる場合、フィールドごとの無効化をスキップできます。

于 2013-05-28T10:42:29.310 に答える