今天写前端代码的时候,发现我的表格里的标签会增加数据,之前对复选框绑定的简单事件在更新表格之后会失效,所以需要用委托事件绑定复选框的全选反选功能。
//全选与反选
//在table大父类上绑定事件
$('.table').on('click','.checkboxAll',function(){
//选中所有子复选框,把checked变为全选复选框的状态
$(".checkbox").prop("checked",$(this).prop("checked"));
})
//在table下的会更新数据的部分绑定委托事件
$('#orgTable').on('click','.checkbox',function(){
//获取复选框有多少个
var allLength = $(".checkbox").length;
//获取被选中的复选框 (name为'checkbox') 有多少个
var checkedLength = $("input:checkbox[name='checkbox']:checked").length;
//这时为全选,则全选复选框要被选中
if(allLength == checkedLength){
$("#checkBoxAll").prop("checked",true);
}else{
//否则就不是全选,全选复选框不能被选中
$("#checkBoxAll").prop("checked",false);
}
})