我正在尝试实现全选复选框,其工作正常,唯一的问题是,当我取消选择复选框时,全选功能将停止为该特定复选框工作。
请注意,我使用的是 Laravel 框架,因此不要对 php 代码使用react。
$(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>
关于javascript - 全选复选框不起作用,因为它必须起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58980114/