0

フォーム内の「X」チェックボックス（任意の入力要素）と「M」オプション選択インデックス（「M」は「X」より小さい）と仮定します。次に、「M」オプションのインデックス/値を選択し、残りのチェックボックスを最適に選択解除するにはどうすればよいですか?

つまり、10 個のチェックボックスと 5 つのオプション インデックス (例: 1,2,4,5,8) があるとします。次に、指定されたインデックスでチェックボックスを選択する必要があります。

次のコードを思い付くことができました。

   HTML:

     <div id="Options">     
        <input id="choice_1"  type="checkbox" name="choice_1" value="Option1"><label for="choice_1">Option1</label>
        <input id="choice_2"  type="checkbox" name="choice_2" value="Option2"><label for="choice_2">Option2</label>
        <input id="choice_3"  type="checkbox" name="choice_3" value="Option3"><label for="choice_3">Option3</label>    

    ..
    ..till choice_10

     </div>

    IN JS:

   //Have to select checkboxes with "Value" in choicesToSelect and give a selection   
  //effect to its label
    var choicesToSelect={"Option1","Option9","Option3","Option4","Option2"};
    selectHighlightCheckBoxes(choicesToSelect);


    function selectHighlightCheckBoxes(choices){
     $.each(
                                choices, function(intIndex, objValue) {

//select based on id or value or some criteria
                                    var option = $("#Options :input[value=" + objValue + "]") ;                       
                                    if ($(option).is("input[type='radio']") || $(option).is("input[type='checkbox']")) {
                                        $(option).attr('checked', true);
                                        $(option).next('label:first').css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' });
                                    } else if ($(option).is("input[type='text']")) {
                                        $(option).css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' });
                                    } else {

                                    }
                                }
                         );
   }

しかし、残りの部分にも効果を追加したいと思います(choiceToSelect配列ではありません)。(choiceToSelect に含まれていない人には赤色かもしれません) これは 1 回のトラバーサル/ループで実行できますか? 最適ですか？またはより良い方法？

4

1 に答える 1

1

少し速く、コードをこれに切り詰めることができます。

var choicesToSelect = ["Option1","Option9","Option3","Option4","Option2"];
selectHighlightCheckBoxes(choicesToSelect);


function selectHighlightCheckBoxes(choices){
  $("#Options :input, label").removeAttr('checked').css({'border':'none', 'background-color':'none', 'font-weight':'normal'});
  $.each(choices, function(intIndex, objValue) {
    var option = $("#Options :input[value=" + objValue + "]"), toStyle = null;
    if (option.is(":radio, :checkbox")) {
        toStyle = option.attr('checked', true).next('label');
    } else if ($(option).is(":text")) {
        toStyle = option;
    }
    toStyle.css({ 'border': '1px solid #FF0000', 'background-color': '#BEF781', 'font-weight': 'bolder' });
  });
}

関数の最初の行で、適用しているスタイリングのチェックを外して削除します。「オフ」要素にも必要なものを追加します。

最後のtoStyle行で、CSS を 1 か所で定義するように統合しました。その.css()呼び出しでは、「オン」要素の内容を設定し、「オフ」要素のスタイルを変更または削除できます。 これは、それが機能することを確認するために遊ぶことができるページです:)

于 2010-04-02T11:32:33.817 に答える