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

Posted 2021-05-03

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

请注意，我正在使用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>
    @php($i = 0) @foreach($tables as $table)
      <tr class="gradeX">
        <td><input type="checkbox" name="ids[]" form="BulkDelete" class="Bulkers" value="{{$table->id}}"></td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>{{$table->column_name}}</td>
        <td>
          <div class="btn-group" role="group">
            <button id="btnGroupDrop3" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Action
            </button>
          </div>
        </td>
      </tr>
    @endforeach
  </tbody>
</table>

答案

实际上是由于您在使用attr时取消批量选择后取消选中“全选”复选框。请随时检查attr和prop之间的区别的文档

$(document).ready(function() {
  $("#BulkSelect").click(function() {
    $('.Bulkers').prop('checked', this.checked);
  });

  $('.Bulkers').change(function() {
    $("#BulkSelect").prop("checked", $(".Bulkers").length === $(".Bulkers:checked").length);
  });
});

<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>

另一答案

使用.prop代替.prop。

问题是.attr仅设置属性.attr。但是，当您单击复选框时，浏览器将更新其.attr属性，而不是其checked属性。

使用.checked，它将更新复选框的checked属性，因此它将与值更改保持同步。

工作示例：

.prop

.checked

以上是关于全选复选框不起作用，因为它必须起作用的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 操作复选框(checkbox) attr checked不起作用

jQuery——操作复选框(checkbox) attr checked不起作用

在GridView中选择全部不起作用

替换或删除后台堆栈上现有片段的代码不起作用

显示 plist 的 TableView 代码不起作用，是因为它必须在 UITableView 控制器上吗？ (Xcode)

添加到片段时按钮不起作用