如何检查jQuery中的div内的所有复选框?

问题描述:

编辑:如何检查jQuery中的div内的所有复选框?

感谢您的答案的家伙,但它看起来是正确的,它适用于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"> 
+0

你正在测试什么浏览器和jQuery版本? – 2011-06-03 21:10:45

+0

FireFox,最新版本的jQuery,1.6.1 – Roger 2011-06-04 06:53:25

尝试通过每个项目迭代发现

$( '#selectChb')点击(函数(){

alert("c!"); 

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

      $(this).attr('checked', !checkbox.attr('checked')); 

    }); 
}); 
+0

您可能想要引用这是1.6之前的版本。应该使用'prop();'来代替1.6。 – 2011-06-03 19:57:00

此代码将切换复选框..取消选中是授予href的类。

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

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

    e.preventDefault(); 

}); 
+0

感谢您的答案,但有点奇怪它不起作用。见上面的编辑。 – Roger 2011-06-03 20:18:59

尝试以下,

Live Demo

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

感谢您的答案,但有点奇怪它不起作用。见上面的编辑。 – Roger 2011-06-03 20:20:45

这是找到一个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或类。

+2

第一次后,我没有得到这个工作;重复点击“checkall”框不会重新选择所有内容:| – Adam 2014-02-11 20:04:39

试试这个代码

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

尝试用

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

道具更换

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

在某些版本的浏览器不支持

试试这个切换的复选框

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

由于声誉问题,无法对latis回答发表评论。

类夜已深,但这个工作对我来说(所有学分LATIS)

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

基本上被替换的Attr与道具。

+0

“由于声誉问题,无法对latis答案发表评论。”如果您只是想发表评论,请不要将其作为答案发布,请参阅http://meta.stackexchange.com/a/214174/189840。 – 2015-12-05 02:23:27

我有一个包含复选框行的(伪)表,我希望能够通过单击进行检查/取消选中。

为了达到这个目的,我将ids分配给各行(在循环中用php),并用另一个复选框结束了每一行,我给了类“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);    
    }   
}); 

希望这有助于。

编辑:从脚本中删除全局并调整检查行为。