jQuery 如何检查jQuery中div中的所有复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6231940/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to check all checkboxes within a div in jQuery?
提问by Roger
EDIT:
编辑：
Thanks for the answers guys, it does look correct and it works on jsfiddle.net , but in my code the alert fires well, yet nothing happens to the checkboxes. :/
感谢大家的回答，它看起来确实正确，并且可以在 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> </td>
</tr>
<tr>
<td width="25" align="left"><input type="checkbox" id="check1" /><label for="check1"> </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"> </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"> </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>
<a href="#" id="deselectChb" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-close"></span>Deselect All</a></td>
<td> </td>
<td> </td>
</tr>
</table>
<br>
</div>
<br>
<div class="ui-widget ui-widget-content ui-corner-all">
回答by Latis Net
This is a derived ultimate solution that finds all checkboxes inside a DIV and checks or unchecks according to an other single checkbox outside the DIV which says check/uncheck
这是一个派生的最终解决方案，它查找 DIV 内的所有复选框，并根据 DIV 外的另一个复选框选中或取消选中，该复选框表示选中/取消选中
function checkCheckboxes( id, pID ){
$('#'+pID).find(':checkbox').each(function(){
jQuery(this).attr('checked', $('#' + id).is(':checked'));
});
}
Usage:
用法：
<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>
Advantage is you can use independent checkbox sets and check / uncheck all independent from other sets. It is simple and no need to work with id or classes of each checkboxes.
优点是您可以使用独立的复选框集并选中/取消选中所有独立于其他集的复选框。它很简单，不需要处理每个复选框的 id 或类。
回答by Loktar
回答by Ahmed Sakr
Try this code
试试这个代码
$("#Div_ID").find('input[type=checkbox]').each(function () {
// some staff
this.checked = true;
});
回答by Amin Eshaq
Try iterating through each items found
尝试遍历找到的每个项目
$('#selectChb').click(function(){
alert("c!");
$('#chbDiv').find(':checkbox').each(function(){
$(this).attr('checked', !checkbox.attr('checked'));
});
});
回答by AJ84
Was not able to comment on latis answer due to reputation issues.
由于声誉问题，无法对 latis 的回答发表评论。
Kind of really late but this worked for me (all credits to latis)
有点晚了，但这对我有用（所有功劳都归功于 latis）
function checkCheckboxes( id, pID ){
$('#'+pID).find(':checkbox').each(function(){
$(this).prop('checked', $('#' + id).is(':checked'));
});
}
Basically replaced attr with prop.
基本上用 prop 替换了 attr。
回答by Justin
This code will toggle the checkboxes.. uncheck is a class given to a an href.
此代码将切换复选框.. 取消选中是一个给定 href 的类。
$('.uncheck').bind('click', function(e) {
$(':checkbox').prop('checked', ($(':checkbox').prop('checked')) ? false : true);
e.preventDefault();
});
回答by Andre Nuechter
I've had a (pseudo)table containing rows of checkboxes which I wanted to be able to check/uncheck with a single click.
我有一个（伪）表，其中包含多行复选框，我希望能够通过单击选中/取消选中这些复选框。
To achieve this I assigned ids to the respective rows (with php during a loop) and ended each row with another checkbox which I gave the class "toggle" and the value the same as the id of the enclosing row/div.
为了实现这一点，我将 ids 分配给相应的行（在循环期间使用 php）并用另一个复选框结束每一行，我给类“切换”和值与封闭行/div 的 id 相同。
Like so:
像这样：
<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>
Then I created the following script to fire when this checkbox is clicked:
然后我创建了以下脚本以在单击此复选框时触发：
$(".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);
}
});
Hope this helps.
希望这可以帮助。
EDIT: Removed global from script and tweaked checking-behavior.
编辑：从脚本中删除全局并调整检查行为。
回答by Crustamet
$(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 is the div you try to search all checkboxes
id_perm_module 是您尝试搜索所有复选框的 div
回答by user3909162
Try this to toggle the check boxes
试试这个来切换复选框
var bool = false;
$('#selectAll').click(function(e){
$('.users-list :checkbox').prop("checked", bool);
bool = !bool;
});
回答by Muyembe
Try replacing
尝试更换
$(':checkbox').prop("checked", true);
with
和
$(':checkbox').attr("checked", true);
prop is not supported in some browser versions
某些浏览器版本不支持 prop
