多组复选框的 jQUery 语法，每个复选框都有自己的“全选”选项答案

【问题标题】：jQUery syntax for multiple groups of checkboxes, each with their own "check all" option多组复选框的 jQUery 语法，每个复选框都有自己的“全选”选项
【发布时间】：2014-07-22 10:30:51
【问题描述】：

我的代码从模板生成 HTML 表单，并使用当时正在处理的数据所需的任何输入元素填充它们。生成的表单包含多组复选框，每个复选框都有自己的“全部选中”框。例如：

<p>Your breakfast order</p>
<div class="a_bunch_of_checkboxes">
<input type="checkbox" class="checkAll">Check All
<input type="checkbox">Toast
<input type="checkbox">Eggs
<input type="checkbox">Bacon
</div>

<p>Your lunch order</p>
<div class="a_bunch_of_checkboxes">
<input type="checkbox" class="checkAll">Check All
<input type="checkbox">Salad
<input type="checkbox">Pizza
<input type="checkbox">Hot Dogs
</div>

等等。（显然，每个“全选”复选框只会选中该特定组中的所有复选框。）

我不太精通 javascript 和 jQuery，我尝试过但未能提供适当的 jQuery 代码来将事件处理程序注册到“检查所有”复选框。

谁能指出我正确的方向？

【问题讨论】：

显然 jQuery 就像 PERL，因为“有不止一种方法可以做到这一点”。 :-) 四个答案，都有工作示例，每个答案都以不同的方式帮助我。你们摇滚！

标签： jquery checkbox

【解决方案1】：

尝试过滤.checkAll中的.siblings()

Demo

如果是动态元素：

$(document).on('click','.checkAll:checkbox',function(){
    $(this).siblings(':checkbox').prop('checked',this.checked);
});

参考：

【讨论】：

【解决方案2】：

试试这个：

$(function(){
  $(document).on("change",'.checkAll',function(){
     $(this).closest('.a_bunch_of_checkboxes').find('input[type=checkbox]').prop('checked',$(this).is(':checked'));
  });

});

Demo

【讨论】：

不错的解决方案，但它只允许选择和取消选择。然后它就停止了。
我没有收到任何错误，要指定问题，它不会选择其他复选框，取消选择确实有效。
你能把你的问题陈述的 jsfiddle 链接分享给我吗？
它只是你的，在 ie11 win7 中不起作用。我认为这是因为attr 而不是prop。
你能用我更新的答案试试吗，我已经用.prop()替换了.attr()。感谢@NinaScholz 指出这个问题。

【解决方案3】：

你的jquery，检查该复选框是否被选中，然后选中所有复选框，否则取消选中

 $('.checkAll').on('click',function(){

    if($(this).is(':checked')){
       $(this).closest('div').find('input[type="checkbox"]').prop('checked','checked');
        }else{        
            $(this).closest('div').find('input[type="checkbox"]').prop('checked','');
    }
});

DEMO

【讨论】：

【解决方案4】：

您可以尝试使用checkAll 类检查复选框的状态，并循环遍历 div 下的每个复选框并将checkAll 复选框状态应用于所有其他复选框：

$('.checkAll').click(function(event) {  //on click 
     var $boxes = $(this).closest('div').find('input[type="checkbox"]');  
     if(this.checked) { // check select status
         $boxes.each(function() { //loop through each checkbox
             this.checked = true;  //select all checkboxes                
         });
     }else{
         $boxes.each(function() { //loop through each checkbox
             this.checked = false; //deselect all checkboxes under the checkAll checkbox                      
         });         
     }
 });

Working DEMO

【讨论】：