0

当用户单击全选按钮（也在同一个 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>
4

5 回答 5

2

这是一个活生生的例子

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

});
于 2012-07-19T14:41:03.703 回答
1

虽然其他回答都是正确的，但我想补充一点：如果 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);

});

这避免了检查不相关的订阅复选框。

您可以在这里看到它的实际效果。

于 2012-07-19T14:54:56.273 回答
0 
$('input[name=select_all]').click(function(){
  $('input[type=checkbox]').attr('checked',true);
});
于 2012-07-19T14:43:00.253 回答
0

除了上一个答案：

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

    if($(this).prop('checked')) {
         $('input[type=checkbox]').attr('checked', true);
    }else{
         $('input[type=checkbox]').attr('checked', false);
    }
});
于 2012-07-19T14:51:00.780 回答
0

您也可以执行类似的操作来选择一个 div 内的复选框而不是所有复选框：如果选中全选，它将选中所有复选框，如果取消选中全选，它将取消选中所有选择框。

http://jsfiddle.net/y7RsB/

$("input[name=select_all]").click(function(){
    $(this).parent().find('input:checkbox').prop('checked',$(this).prop("checked") ? true : false);
});​
于 2012-07-19T15:05:00.040 回答