checkbox的全选操作

weixin_30527551

于 2017-02-14 15:11:00 发布

阅读量111

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/husfsh-16300/p/6397717.html

本文介绍了一个使用JavaScript实现的表格选择器功能，该功能允许用户通过点击全选按钮或单独选择表格中的每一项来控制所有项目的选中状态。此外，还介绍了如何通过事件监听来同步这些选择状态。

<table id="filetable">
<tr>
<td>
<input type="checkbox" id="chooseall" name='cb-check-all' checked="checked">
<b style="color: red">请选择需要发送的附件</b>
</td>
</tr>
<c:forEach items="${list }" var="fileItem">
<tr>
<td>
<input type="checkbox" id="${fileItem.id }" value="${fileItem.id }" name="files" checked="checked">
${fileItem.fileName }
</td>
</tr>
</c:forEach>
</table>

$('#filetable').on("click",":checkbox",function(){
if ($(this).is("[name='cb-check-all']")) {
//全选
$(":checkbox",$('#filetable')).prop("checked",$(this).prop("checked"));//filetable下面所有的复选框的选中状态都和[name='cb-check-all']的状态一致
}else{
//一般复选
var checkbox = $(":checkbox[name='files']");
$(":checkbox[name='cb-check-all']",$('#filetable')).prop('checked', 0 < checkbox.filter(':checked').length);//当有一个复选框的状态为checked的时候。[name='cb-check-all']的复选框选中
}
});

转载于:https://www.cnblogs.com/husfsh-16300/p/6397717.html