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

我假设在表单中有'X'复选框（任何输入元素）和“M”选项选择索引（“M”小于等于“X”）。那么我如何选择“M”选项索引/值并最优地取消选中其余的复选框？即，假设我有10个复选框和5个选项索引（例如：1,2,4,5,8），那么我必须选择复选框与给定的索引。Jquery复选框选择/取消选择最佳给定X复选框

我能想出下面的代码：

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阵列）也。（对于那些不在choiceToSelect中的可能是红色的）这可以在一个遍历/循环中完成吗？最佳？或更好的方式？

来源

2010-04-02 Amitd

您可以到这个修剪你的代码，更快一点：

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 :)

来源

2010-04-02 11:32:33

thx ..但如何将效果/ css添加到未选中的项目？例如：choicesToSelect为'green'，而这些items不存在（“Off”元素）在choicesToSelect中为'red'？ – Amitd 2010-04-02 12:01:05

@Amitd - 在顶部CSS中执行此操作，它适用于** all **元素，然后循环遍历选定的元素。在'toStyle.css（）'部分中反转或删除适用于所有不需要的选项的所有样式，是否合理？ – 2010-04-02 12:02:39

@Nick：在调用“selectHighlightCheckBoxes”之前添加此行： $（“＃Options：input，label”）。removeAttr（'checked'）。css（{'border'：'none'，'background-color'： 'red'，'font-weight'：'normal'}）; 是否正确？ – Amitd 2010-04-02 12:10:10

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

回答

相关问题