我使用jquery-1.9.1.js 在我的html页面中，它第一次运行良好。
就像http://jsfiddle.net/pzCcE/1/
一样有人可以帮我改进吗？
<table id="tab1">
<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" id="book" value="book1">book1
<input type="checkbox" name="book" id="book" value="book2">book2
<input type="checkbox" name="book" id="book" value="book3">book3
<input type="checkbox" name="book" id="book" value="book4">book4
<input type="checkbox" name="book" id="book" value="book5">book5</table>
$(function () {
$("#tab1 #checkAll").click(function () {
if ($("#tab1 #checkAll").is(':checked')) {
$("#tab1 input[type=checkbox]").each(function () {
$(this).attr("checked", true);
});
} else {
$("#tab1 input[type=checkbox]").each(function () {
$(this).attr("checked", false);
});
}
});
});
答案 0 :(得分：39)
更改
$(this).attr("checked", true);
到
$(this).prop("checked", true);
<强> jsFiddle example
我其实只是回答了另一个与此类似的问题。根据{{3}}文档：
.prop（）方法是设置值的便捷方法 属性 - 尤其是在使用值设置多个属性时 由函数返回，或在多个元素上设置值 一旦。设置selectedIndex，tagName，nodeName时应该使用它 nodeType，ownerDocument，defaultChecked或defaultSelected。以来 在jQuery 1.6中，无法再使用.attr（）设置这些属性 方法。它们没有相应的属性，只是 属性。
属性通常会影响DOM元素的动态状态 更改序列化的HTML属性。例子包括价值 输入元素的属性，输入的禁用属性和 按钮，或复选框的选中属性。 .prop（）方法 应该用来设置禁用和检查而不是.attr（） 方法。 .val（）方法应该用于获取和设置 值。
答案 1 :(得分：9)
您应该使用具有相同名称的类，ID必须是唯一的！
<input type="checkbox" name="checkAll" id="checkAll">全選
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>
$(function () {
$("#checkAll").click(function () {
if ($("#checkAll").is(':checked')) {
$(".book").prop("checked", true);
} else {
$(".book").prop("checked", false);
}
});
});
答案 2 :(得分：3)
由于OP需要根据另一个复选框id=全選选中取消选中所有复选框。
上面提供的@ j08691的解决方案很好，但它没有一件事，也就是说，当列表中的任何其他复选框未选中时，解决方案不会取消选中id=全選复选框。
因此，我建议使用id=全選复选框检查/取消选中所有复选框的解决方案，如果未选中任何其他复选框，则取消选中复选框id=全選。如果用户手动点击所有其他复选框，则还应选中复选框id=全選以反映该关系。
OP对多个复选框使用相同的id，这违反了DOM的规则。 Element IDs should be unique within the entire document.
因此，以下代码涵盖了此类场景的所有方面。
<强> HTML
<table>
<tr>
<td>
<input type="checkbox" name="checkAll" id="checkAll">全選 (ALL)
<input type="checkbox" name="book" id="book_1" value="book1">book1
<input type="checkbox" name="book" id="book_2" value="book2">book2
<input type="checkbox" name="book" id="book_3" value="book3">book3
<input type="checkbox" name="book" id="book_4" value="book4">book4
<input type="checkbox" name="book" id="book_5" value="book5">book5
</td>
</tr>
</table>
<强> JQuery的
$(document).ready(function() {
$('#checkAll').click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("[id*=book_]").change(function () {
if ($('input[id*=book_][type=checkbox]:checked').length == $('input[id*=book_][type=checkbox]').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
});
属性选择器的说明[name * =“value”]
选择具有指定属性的元素，其值包含给定的子字符串。
所以$('#checkAll')只返回父复选框，我选中/取消选中所有复选框。
并且$('[id$=book_]')会向我返回除父（全选）复选框以外的所有复选框。然后在父复选框的基础上，我选中/取消选中所有其他复选框。
我还检查除了父（全选）复选框之外的复选框的长度，如果检查了所有其他复选框，则检查父（全选）复选框。所以这是交叉检查所有可能情况的方法，从不错过任何场景。
答案 3 :(得分：2)
最快的方式。并保存一些行
$(".ulPymnt input[type=checkbox]").each(function(){
$(this).prop("checked", !$(this).prop("checked"))
})
答案 4 :(得分：0)
回答j08691也看下面的东西..
创建像#id #id这样的选择器完全没有意义，因为根据定义，ID必须在DOM中是唯一的。
<input type="checkbox" name="checkAll" class="checkAll">
$("#tab1 .checkAll").click(function () {
答案 5 :(得分：0)
添加它.... FOR .....如果取消选中一个复选框（id：book）意味着它将导致取消选中主复选框（id：checkAll）
$("#tab1 #book").click(function () {
if($('#book').is(':checked'))
{
$("#checkAll").prop("checked", false);
}
});
答案 6 :(得分：0)
$("input[name='select_all_photos']").click(function () {
var checked = $(this).is(':checked');
$("input[name^='delete_']").each(function () {
$(this).prop("checked", checked);
});
});
不要做一个if语句。
答案 7 :(得分：0)
我刚刚简化了@ j08691回答
$("#checkAll").click(function() {
var allChecked = $(this);
$("#tab1 input[type=checkbox]").each(function() {
$(this).prop("checked", allChecked.is(':checked'));
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab1">
<tr>
<td>
<input type="checkbox" name="checkAll" id="checkAll">Select all
<input type="checkbox" name="book" id="book" value="book1">book1
<input type="checkbox" name="book" id="book" value="book2">book2
<input type="checkbox" name="book" id="book" value="book3">book3
</td>
</tr>
</table>
答案 8 :(得分：0)
`change click to ch $("#checkAll").click(); to $("#checkAll").change();
> Blockquote
$(function () {
$("#checkAll").change(function () {
if ($("#checkAll").is(':checked')) {
$(".book").prop("checked", true);
} else {
$(".book").prop("checked", false);
}
});
});`
答案 9 :(得分：0)
此复选框适用于所有复选框列表。 只需将“ check-all”添加到控制该输入的输入中，该输入必须具有相同的名称
$(function() {
$('.check-all').each(function(){
var checkListName = $(this).attr('name');
$(this).change(function(){
//change all checkbox of the list checked status
$('input[name="'+checkListName+'"]').prop('checked', $(this).prop('checked'));
});
$('input[name="'+checkListName+'"]').change(function(){
//change .check-all checkbox depending of the list checked status
$('input[name="'+checkListName+'"].check-all').prop('checked', ($('input[name="'+checkListName+'"]:checked').not('.check-all').length == $('input[name="'+checkListName+'"]').not('.check-all').length));
});
});
});