今天写前端代码的时候,发现我的表格里的标签会增加数据,之前对复选框绑定的简单事件在更新表格之后会失效,所以需要用委托事件绑定复选框的全选反选功能。
//全选与反选 //在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); } })