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

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 2

虽然其他答案都是正确的，但我想补充一点：如果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中看到它。

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

您也可以执行以下操作来选择一个div中的复选框而不是所有复选框：如果选中全选，则会选中所有复选框，如果取消选中全选，则取消选中所有选择框。

http://jsfiddle.net/y7RsB/

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

选择select all div周围的复选框

5 个答案: