选择围绕选择所有分区的复选框

Question

我想检查位于div中的所有复选框，当用户单击选择所有按钮（也在同一个div）。我想用jQuery来实现这一点。我的HTML代码如下所示：

<div> 
    <input type='checkbox' name='select_all' /> 
    <input type='checkbox' name='check1' />  
    <input type='checkbox' name='check2' /> 
    <input type='checkbox' name='check3' /> 
</div>  

Answer 1

你也可以这样做来选择一个div内的复选框而不是所有复选框： 如果选中全选，它将选中所有复选框，如果取消选中全选，它将取消选中所有选择框。

http://jsfiddle.net/y7RsB/

$("input[name=select_all]").click(function(){ 
    $(this).parent().find('input:checkbox').prop('checked',$(this).prop("checked") ? true : false); 
});​ 

Answer 2

Here's一个活生生的例子

<div> 
    <input type='checkbox' name='select_all' /> 
    <input type='checkbox' name='check1' />  
    <input type='checkbox' name='check2' /> 
    <input type='checkbox' name='check3' /> 
</div> ​ 

$(document).on('change', '[name="select_all"]', function(){ 
     var $this = $(this); 
     var div = $this.parent(); 
     var ischecked = $this.prop('checked'); 
     div.find(':checkbox').not($this).prop('checked', ischecked); 

}); 

Answer 3

$('input[name=select_all]').click(function(){ 
    $('input[type=checkbox]').attr('checked',true); 
}); 

Answer 4

在加入上一个答案：

$('input[name=select_all]').on('click', function(){ 

    if($(this).prop('checked')) { 
     $('input[type=checkbox]').attr('checked', true); 
    }else{ 
     $('input[type=checkbox]').attr('checked', false); 
    } 
}); 

Answer 5

虽然其他的反应是正确的，我会喜欢添加一些东西：如果HTML页面中有其他复选框，只需通过类型（复选框）选中复选框，就可以选中与你想要的无关的其他复选框。

最少添加的代码应该不会影响其他代码部分，那就是为复选框指定一个特定的类。例如，如果您的复选框代表的爱好，你加他们hobby_checkbox类：

<div> 
    <input type='checkbox' name='select_all' /> Select all hobbies 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check1' /> Ski 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check2' /> Travel 
    <br> 
    <input type='checkbox' class='hobby_checkbox' name='check3' /> PC Games 
    <br> 
    <br> 
    <input type='checkbox' class='other_checkbox' name='other_check' /> Subscribe 
</div> 

然后，当你要选择你要检查的复选框，选择只属于该类的那些你想要的：

$(document).on('change', '[name="select_all"]', function(){ 
     var $this = $(this); 
     var div = $this.parent(); 
     var ischecked = $this.prop('checked'); 
     div.find(':checkbox.hobby_checkbox').prop('checked', ischecked); 

}); 

这样可以避免检查不相关的订阅复选框。

你可以在行动here看到它。