如何检查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> </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">
尝试通过每个项目迭代发现
$( '#selectChb')点击(函数(){
。alert("c!"); $('#chbDiv').find(':checkbox').each(function(){ $(this).attr('checked', !checkbox.attr('checked')); }); });
您可能想要引用这是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();
});
感谢您的答案,但有点奇怪它不起作用。见上面的编辑。 – Roger 2011-06-03 20:18:59
这是找到一个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或类。
第一次后,我没有得到这个工作;重复点击“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与道具。
“由于声誉问题,无法对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);
}
});
希望这有助于。
编辑:从脚本中删除全局并调整检查行为。
你正在测试什么浏览器和jQuery版本? – 2011-06-03 21:10:45
FireFox,最新版本的jQuery,1.6.1 – Roger 2011-06-04 06:53:25