Select 所有復選框都不起作用，因為它必須起作用

Question

我正在嘗試實現 select 所有復選框並且其工作正常唯一的問題是，當我取消選中復選框時，select 所有 function 停止為特定復選框工作。

請注意，我使用的是 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>

Answer 1

使用.prop而不是.attr 。

問題在於，使用.attr時，它只設置了屬性checked 。 但是，當您單擊復選框時，瀏覽器會更新其.checked屬性，而不是其checked屬性。

使用.prop ，它將更新復選框的.checked屬性，因此它將與值更改同步。

工作示例：

 $(document).ready(function() { $("#BulkSelect").click(function() { $('.Bulkers').prop('checked', this.checked); }); $('.Bulkers').change(function() { if ($(".Bulkers").length == $(".Bulkers:checked").length) { $("#BulkSelect").prop("checked", true); } else { $("#BulkSelect").prop("checked", false); } }); });

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

Answer 2

實際上，由於您在批量 select 之后取消選擇一個時使用attr ，因此 Select 所有復選框保持選中狀態。 請隨時查看有關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>