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

Question

我使用 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);
            });
        }
    });
});

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() 方法来设置禁用和检查，而不是 .attr() 方法。.val() 方法应该用于获取和设置值。

Answer 2

您应该使用具有相同名称的类，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);
        }
    });
});

Answer 3

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

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

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

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

---

所以下面的代码涵盖了这种场景的所有方面。

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

---

我还检查了除父（全选）复选框之外的复选框的长度，如果所有其他复选框都被选中，那么我检查父（全选）复选框。所以这是交叉检查所有可能条件并且不会错过任何情况的方法。

演示工作 JSFiddle 在这里。

Answer 4

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

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

Answer 5

我刚刚简化了@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>

Answer 6

随着 j08691 的回答，也看看下面的事情..

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

<input type="checkbox" name="checkAll" class="checkAll">

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

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

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

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

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