Jquery CheckBox 选择/取消选择最佳给定 X 个复选框

Question

我假设在表单中使用“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 {

                                    }
                                }
                         );
   }

但我也想为 rest 添加效果（不在choosesToSelect 数组中）。 （对于那些不在 choiceToSelect 中的人可能是红色） 这可以在一次遍历/循环中完成吗？ 最佳？或者更好的方法？

Answer 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 合并到一个位置。在该 .css() 调用中，您可以设置“on”元素所需的内容，并更改或删除“off”元素所具有的样式。 这是一个页面，您可以使用它来查看它的工作情况 :)