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

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

实际上，由于您在批量选择一个后取消选择一个时正在使用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>

Answer 2

使用.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>