JQuery绑定委托事件的复选框的全选与反选

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

//全选与反选
//在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);
	}
}) 

猜你喜欢

转载自blog.csdn.net/qq_41737716/article/details/79918849