javascript - 全选复选框不起作用,因为它必须起作用
问题描述
我正在尝试实现全选复选框,它的工作正常,唯一的问题是当我取消选中复选框时,全选功能停止对该特定复选框工作。
请注意,我使用的是 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
,它只设置属性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>
推荐阅读
- json - 如何使用 jq 对输出进行排序/唯一化
- c - 将 Linux grep 命令捕获到 C 中的变量
- html - 具有响应式 iframe 的 Bootstrap 4 模态
- r - 在 R 中编写循环 - 从列中获取值并将其分配给一个数字
- windows - 如何通过windows批处理命令定义变量并在jenkins中使用
- ssis - 在 SSIS 中使用参数执行 SQL
- c - 循环的,单独链接的,节点一个接一个被删除的地方
- php - 如何使用 php pdo 创建远程 mysql 连接
- python - 如何在 Firestore 的子集合中查询文档?
- java - 如何找到两个ArrayList之间的差异
在 Java 中不使用 Java 8 Stream?