选中取消选中所有复选框与另一个复选框使用jquery

我使用jquery-1.9.1.js在我的html页面中，它第一次运行良好。

就像http://jsfiddle.net/pzCcE/1/

有人可以帮我改进吗？

 全選 book1 book2 book3 book4 book5 $(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); }); } }); }); 

Answer 1

更改

 $(this).attr("checked", true); 

至

 $(this).prop("checked", true); 

jsFiddle示例

我其实只是回答了另一个与此类似的问题。 根据.prop（）文档：

.prop（）方法是设置属性值的便捷​​方式 – 尤其是在设置多个属性时，使用函数返回的值或一次设置多个元素的值。 设置selectedIndex，tagName，nodeName，nodeType，ownerDocument，defaultChecked或defaultSelected时应该使用它。 从jQuery 1.6开始，无法再使用.attr（）方法设置这些属性。 它们没有相应的属性，只是属性。

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。 示例包括输入元素的value属性，输入和按钮的disabled属性或复选框的checked属性。 应该使用.prop（）方法来设置disabled和checked而不是.attr（）方法。 应该使用.val（）方法来获取和设置值。

Answer 2

您应该使用具有相同名称的类，ID必须是唯一的！

 全選book1 book2 book3 book4 book5 $(function () { $("#checkAll").click(function () { if ($("#checkAll").is(':checked')) { $(".book").prop("checked", true); } else { $(".book").prop("checked", false); } }); }); 

Answer 3

由于OP需要在另一个复选框id=全選的基础上检查取消选中所有复选框。

上面提供的@ j08691解决方案很好，但它没有一件事，也就是说，当列表中的任何其他复选框未选中时，解决方案不会取消选中id=全選复选框。

所以我提出了一个解决方案，根据id=全選复选框检查/取消选中所有复选框，如果未选中任何其他复选框，则复选框id=全選未选中。 如果用户手动点击所有其他复选框，则还应检查复选框id=全選以反映该关系。

OP对多个复选框使用相同的id，这违反了DOM的规则。 元素ID在整个文档中应该是唯一的。

---

因此，以下代码涵盖了此类场景的所有方面。

HTML

 
 
 
 全選 (ALL) book1 book2 book3 book4 book5 
 
  

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_]')返回除了父（全选）复选框之外的所有复选框。 然后在父复选框的基础上，我选中/取消选中所有其他复选框。

---

我还检查除了父（全选）复选框之外的复选框的长度，如果检查了所有其他复选框，则检查父（全选）复选框。 所以这是交叉检查所有可能的条件并且从不错过任何场景的方法。

在这里演示JSFiddle的演示。

Answer 4

最快的方式。 并保存一些行

  $(".ulPymnt input[type=checkbox]").each(function(){ $(this).prop("checked", !$(this).prop("checked")) }) 

Answer 5

回答j08691也看下面的东西..

创建像#id #id这样的选择器是完全没有意义的，因为根据定义，ID必须在DOM中是唯一的。

  $("#tab1 .checkAll").click(function () { 

Answer 6

添加它…. FOR …..如果取消选中一个复选框（id：book）意味着它将导致取消选中主复选框（id：checkAll）

 $("#tab1 #book").click(function () { if($('#book').is(':checked')) { $("#checkAll").prop("checked", false); } }); 

Answer 7

 $("input[name='select_all_photos']").click(function () { var checked = $(this).is(':checked'); $("input[name^='delete_']").each(function () { $(this).prop("checked", checked); }); }); 

不要打扰if语句。

Answer 8

我刚刚简化了@ j08691的答案

 $("#checkAll").click(function() { var allChecked = $(this); $("#tab1 input[type=checkbox]").each(function() { $(this).prop("checked", allChecked.is(':checked')); }) }); 

  
 
 
 Select all book1 book2 book3 
 
  

Answer 9

 `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); } }); });` 

Answer 10

这个适用于所有复选框列表。 只需将“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)); }); }); });