如何使用jQuery选中一个div中的所有复选框？

Question

编辑：

谢谢大家的回答，看起来是正确的，并且在jsfiddle.net上可以工作，但在我的代码中，警报会触发，但复选框不会有任何反应。 :/

     $('#selectChb').click(function(){
         $(':checkbox').prop("checked", true);
         alert("1");
    });

     $('#deselectChb').click(function(){
         $(':checkbox').prop("checked", false);
         alert("2");
    });

...

<div id="chbDiv" class="ui-widget ui-widget-content ui-corner-all" >  <br></br>
  <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
    <td colspan="2">Following:</td>
    <td>&nbsp;</td>
  </tr>
    <tr>
    <td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1">&nbsp;</label></td>
    <td width="45" align="center"><img src="face_01.jpg" width="32" height="32"></td>
    <td>Andrew Lloyd Webber</td>
  </tr>
      <tr>
    <td width="25" align="left"><input type="checkbox" id="check2" /><label for="check2">&nbsp;</label></td>
    <td width="25" align="center"><img src="face_02.jpg" width="32" height="32"></td>
    <td>Richard Branson</td>
  </tr>
      <tr>
    <td width="25" align="left"><input type="checkbox" id="check3" /><label for="check3">&nbsp;</label></td>
    <td width="25" align="center"><img src="face_03.jpg" width="32" height="32"></td>
    <td>Dmitry Medvedev</td>
  </tr>
</table>
  <br>
  <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
    <tr>
      <td><a href="#" id="selectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-check"></span>Select All</a>&nbsp;
      <a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    </table>
<br>

</div>
  <br>
  <div  class="ui-widget ui-widget-content ui-corner-all">

- Roger

---

你在哪个浏览器上进行测试？使用的是哪个版本的jQuery？ - Gary Green

FireFox，最新版本的jQuery，1.6.1 - Roger

Answer 1

这是一个衍生的最终解决方案，它找到DIV内的所有复选框，并根据DIV外的单个复选框来勾选或取消勾选，该复选框表示勾选/取消勾选

    function checkCheckboxes( id, pID ){

    $('#'+pID).find(':checkbox').each(function(){

        jQuery(this).attr('checked', $('#' + id).is(':checked'));

    });     

}

使用方法:

<label>check/uncheck  
<input type="checkbox" id="checkall" value="1" 
onclick="checkCheckboxes(this.id, 'mycheckboxesdiv');" >
</label>

<div id="mycheckboxesdiv">
<input type="checkbox" value="test1" name="test">
<input type="checkbox" value="test2" name="anothertest">
<input type="checkbox" value="test3" name="tests[]">
<input type="checkbox" value="test1" name="tests[]">
</div>

优点是您可以使用独立的复选框集，并且独立于其他集合选择/取消选择所有内容。这很简单，无需使用每个复选框的ID或类。

- Latis Net

---

第一次操作后，我无法再次使其工作；重复点击“全选”框并未重新选择所有内容 :| - Adam

根据您的JQuery版本，您可能需要使用.prop()而不是.attr()。 - Ross

找到所有复选框，上面的代码对我有效。谢谢。 - Mohammed Sabbir

Answer 2

尝试以下内容：

演示页面

$('#selectChb').click(function(){ 
     $(':checkbox').prop("checked", true);
});

- Loktar

---

谢谢回答，但有点奇怪它不起作用。请参见上面的编辑。 - Roger

Answer 3

尝试使用这段代码

 $("#Div_ID").find('input[type=checkbox]').each(function () {
             // some staff
             this.checked = true;
        });

- Ahmed Sakr

Answer 4

尝试迭代遍历每个找到的项目。

$('#selectChb').click(function(){ 
   alert("c!");

   $('#chbDiv').find(':checkbox').each(function(){
      $(this).attr('checked', !checkbox.attr('checked'));
   });
});

- Amin Eshaq

---

你可能需要提及这是1.6之前的版本。1.6之后应该使用prop();代替。 - Code Maverick

Answer 5

由于声望问题，我无法对latis的回答进行评论。

虽然有点晚了，但这对我很有帮助（所有功劳归给latis）。

function checkCheckboxes( id, pID ){
        $('#'+pID).find(':checkbox').each(function(){
            $(this).prop('checked', $('#' + id).is(':checked'));
        });     
    }

基本上用prop替换了attr。

- AJ84

---

由于声望问题，我无法对Latis的答案进行评论。如果您只是想发表评论，请不要将其发布为答案，请参见http://meta.stackexchange.com/a/214174/189840。 - Dennis Meng

Answer 6

这段代码将切换复选框.. uncheck 是赋予给 href 的类。

$('.uncheck').bind('click', function(e) {

    $(':checkbox').prop('checked', ($(':checkbox').prop('checked')) ? false : true);

    e.preventDefault();

});

- Justin

---

谢谢回答，但有点奇怪它不起作用。请参见上面的编辑。 - Roger

Answer 7

$(document).on('change', '.toggle', function(e){

    var data_target = $(this);

    if($(data_target).is( ":checked" ))
    {
        var id_module = parseInt($(data_target).attr('id_module'));

        $('#id_perm_module_'+id_module).find(':checkbox').each(function()
        {
            $(this).prop('checked', true);
        });     

    }
    else            
    {
        var id_module = parseInt($(data_target).attr('id_module'));

        $('#id_perm_module_'+id_module).find(':checkbox').each(function()
        {
            $(this).prop('checked', false);
        });             
    }
});

id_perm_module 是你尝试搜索所有复选框的 div

- Crustamet

Answer 8

尝试使用以下方法切换复选框

var bool = false;
    $('#selectAll').click(function(e){
    $('.users-list :checkbox').prop("checked", bool);
    bool = !bool;
});

- user3909162

Answer 9

我有一个（伪）表格，其中包含多行复选框，我希望能够通过单击一次来选择/取消选择。

为了实现这一点，我在循环过程中使用php为各行分配了id，并以另一个复选框结束每一行，我将其赋予了类“toggle”，并将值设置为封闭行/ div的id。

像这样：

<div class="table">
  <div class="row" id="rowId">
    <span class="td"><input type="checkbox" name="cb1"></span>
    <span class="td"><input type="checkbox" name="cb2"></span>
    <span class="td"><input type="checkbox" name="cbn"></span>
    <span class="td"><input type="checkbox" class="toggle" value="rowId"></span>
  </div>
...
</div>

然后我创建了以下脚本，以便在单击此复选框时触发：

$(".toggle").click(function(){
    var id = this.value;        
    if ($(this).attr("checked")) {
        $(this).attr("checked", false);         
        $('#' + id).find(':checkbox').prop("checked", false);
    } else {
        $(this).attr("checked", true);
        $('#' + id).find(':checkbox').prop("checked", true);            
    }           
});

希望这可以帮到你。

编辑：从脚本中删除了全局变量并调整了检查行为。

- Andre Nuechter

Answer 10

尝试替换

     $(':checkbox').prop("checked", true);

使用

     $(':checkbox').attr("checked", true); 

在某些浏览器版本中，不支持prop属性

- Muyembe