Question

我假设在Form中使用'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 {

                                    }
                                }
                         );
   }

但我也想在休息（不在choicesToSelect数组中）添加效果。（可能是那些没有选择的人的红色ToSelect）这可以在一个遍历/循环中完成吗？最理想？还是更好的方式？

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' });
  });
}

在该函数的第一行，它取消选中并删除您正在应用的任何样式。添加任何你想要“off”元素的东西。

在最后的toStyle行，我整合了CSS，以便在一个位置定义。在.css()调用中，您可以设置“on”元素的内容，并更改或删除“off”元素所具有的样式。 Here's a page you can play with to see it working：）

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

1 个答案: