在jQuery中添加可全选的复选框可以通过以下步骤实现:
<input type="checkbox" id="selectAll">全选
<table>
<tr>
<td><input type="checkbox" class="dataRow"></td>
<td>Data 1</td>
</tr>
<tr>
<td><input type="checkbox" class="dataRow"></td>
<td>Data 2</td>
</tr>
<tr>
<td><input type="checkbox" class="dataRow"></td>
<td>Data 3</td>
</tr>
</table>
$(document).ready(function() {
// 全选复选框的事件处理程序
$("#selectAll").change(function() {
$(".dataRow").prop("checked", $(this).prop("checked"));
});
// 数据行复选框的事件处理程序
$(".dataRow").change(function() {
// 检查是否所有数据行的复选框都被选中
if ($(".dataRow:checked").length === $(".dataRow").length) {
$("#selectAll").prop("checked", true);
} else {
$("#selectAll").prop("checked", false);
}
});
});
通过以上代码,当全选复选框被选中时,所有数据行的复选框也会被选中;当全选复选框取消选中时,所有数据行的复选框也会取消选中。同时,当手动选中或取消选中数据行的复选框时,全选复选框的状态也会相应地更新。
这种方法可以用于任何包含数据行的表格,使用户可以方便地选择或取消选择所有数据行。
领取专属 10元无门槛券
手把手带您无忧上云