如何使用jQuery选中所有复选框？
如何使用jQuery选中所有复选框？
提问于 2013-08-31 00:31:29
我不是jQuery专家，但我已经尝试为我的应用程序创建了一个小脚本。我想选中所有的复选框，但它不能正常工作。
首先，我尝试使用attr，之后我又尝试使用prop，但我做错了一些事情。
我先试了一下：
$("#checkAll").change(function(){
if (! $('input:checkbox').is('checked')) {
$('input:checkbox').attr('checked','checked');
} else {
$('input:checkbox').removeAttr('checked');
}
});但这并不管用。
接下来:这比上面的代码工作得更好
$("#checkAll").change(function(){
if (! $('input:checkbox').is('checked')) {
$('input:checkbox').prop('checked',true);
} else {
$('input:checkbox').prop('checked', false);
}
});这两个例子都不起作用。
JSFiddle：http://jsfiddle.net/hhZfu/4/
回答 21
Stack Overflow用户
回答已采纳
发布于 2013-08-31 00:32:30
Stack Overflow用户
发布于 2014-09-06 13:30:43
这里有一个完整的解决方案。
$(document).ready(function() {
$("#checkedAll").change(function() {
if (this.checked) {
$(".checkSingle").each(function() {
this.checked=true;
});
} else {
$(".checkSingle").each(function() {
this.checked=false;
});
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")) {
var isAllChecked = 0;
$(".checkSingle").each(function() {
if (!this.checked)
isAllChecked = 1;
});
if (isAllChecked == 0) {
$("#checkedAll").prop("checked", true);
}
}
else {
$("#checkedAll").prop("checked", false);
}
});
});Html应该是：
选中三个复选框上的单个复选框将被选中和取消选中。
<input type="checkbox" name="checkedAll" id="checkedAll" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />希望这对某人有帮助，就像对我一样。
Stack Overflow用户
发布于 2018-05-01 16:02:17
我认为当用户手动选择全部复选框时，应自动选中全部复选框，或者用户取消选中所有选定复选框中的一个复选框时，应自动取消选中全部复选框。这是我的代码..
$('#checkall').change(function () {
$('.cb-element').prop('checked',this.checked);
});
$('.cb-element').change(function () {
if ($('.cb-element:checked').length == $('.cb-element').length){
$('#checkall').prop('checked',true);
}
else {
$('#checkall').prop('checked',false);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox 1</br>
<input type="checkbox" class="cb-element" /> Checkbox 2</br>
<input type="checkbox" class="cb-element" /> Checkbox 3
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18537609
复制相关文章
相似问题