全选复选框不起作用，因为它必须起作用

Question

我正在尝试实现全选复选框，它的工作正常，唯一的问题是当我取消选中复选框时，全选功能停止对该特定复选框工作。

请注意，我使用的是 Laravel 框架，所以不要对 php 代码做出反应。

$(document).ready(function() {

  $("#BulkSelect").click(function() {

    $('.Bulkers').attr('checked', this.checked);

  });

  $('.Bulkers').change(function() {

    if ($(".Bulkers").length == $(".Bulkers:checked").length) {

      $("#BulkSelect").attr("checked", "checked");

    } else {

      $("#BulkSelect").removeAttr("checked");

    }

  });

});

<table id="data-table" class="table table-striped table-bordered table-hover">

  <thead>

   <tr>

      <th><input type="checkbox" id="BulkSelect"></th>

      <th>Hater's Name</th>

      <th>Hater's Profile Link</th>

      <th>Victim's Name</th>

      <th>Victim's Post Link</th>

      <th>Country</th>

      <th>Source</th>

      <th>

        <div class="btn-group" role="group">

          <button id="btnGroupDrop3" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            Action

          </button>

          <div class="dropdown-menu" aria-labelledby="btnGroupDrop3" x-placement="bottom-start">

            <form method="post" id="BulkDelete" action="{{my_route}}">

              @csrf

              <button type="submit" class="dropdown-item">Delete</button>

              <button type="button" onclick="BulkApprove()" class="dropdown-item">Approve</button>

            </form>

          </div>

        </div>

      </th>

    </tr>

  </thead>

  <tbody>    

</table>

Answer 1

实际上，由于您attr在批量选择后取消选择一个时使用，全选复选框保持选中状态。请随时检查之间的区别的文档attr和prop$(document).ready(function() {&nbsp; $("#BulkSelect").click(function() {&nbsp; &nbsp; $('.Bulkers').prop('checked', this.checked);&nbsp; });&nbsp; $('.Bulkers').change(function() {&nbsp; &nbsp; $("#BulkSelect").prop("checked", $(".Bulkers").length === $(".Bulkers:checked").length);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="checkbox" name="BulkSelect" id="BulkSelect"/>Select All<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br><input type="checkbox" class="Bulkers">Bulker 1<br>

Answer 2

使用.prop而不是.attr.问题在于，.attr它只设置属性checked。但是，当您单击复选框时，浏览器会更新其.checked属性，而不是其checked属性。使用.prop，它将更新.checked复选框的属性，因此它将与值更改同步。工作示例：$(document).ready(function() {&nbsp; $("#BulkSelect").click(function() {&nbsp; &nbsp; $('.Bulkers').prop('checked', this.checked);&nbsp; });&nbsp; $('.Bulkers').change(function() {&nbsp; &nbsp; if ($(".Bulkers").length == $(".Bulkers:checked").length) {&nbsp; &nbsp; &nbsp; $("#BulkSelect").prop("checked", true);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; $("#BulkSelect").prop("checked", false);&nbsp; &nbsp; }&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="BulkSelect" type="checkbox" /> Select All<hr><input class="Bulkers" type="checkbox" /> 0<br><input class="Bulkers" type="checkbox" /> 1<br><input class="Bulkers" type="checkbox" /> 2<br><input class="Bulkers" type="checkbox" /> 3<br><input class="Bulkers" type="checkbox" /> 4<br><input class="Bulkers" type="checkbox" /> 5<br><input class="Bulkers" type="checkbox" /> 6<br><input class="Bulkers" type="checkbox" /> 7<br><input class="Bulkers" type="checkbox" /> 8<br><input class="Bulkers" type="checkbox" /> 9<br>