前端checkbox全选与全不选

js原生代码

//功能1：通过标题行选中状态控制数据行选中状态
function fun1(){
    //1.获得标题行checkbox的选中状态
      var flag = document.getElementById("one").checked;
    //2.获得数据行所有checkbox关联的DOM对象
      var domArray =document.getElementsByName("ck");
    //3.依次对数据行中每一个checkbox的checked属性进行赋值
     for(var i=0;i<domArray.length;i++){
             var domObj = domArray[i];
             domObj.checked =flag;
     }
}
//功能2：数据行中checkbox选中状态影响标题行checkbox的选中状态
function fun2(){
    //1.获得数据行所有checkbox关联的DOM对象
    var domArray =document.getElementsByName("ck");
    //2.统计数据行被选中的checkbox的个数
    var checkedNum=0;
    for(var i=0;i<domArray.length;i++){
        var domObj =domArray[i];
        if(domObj.checked == true){
             checkedNum++;
        }
    }
    //3.判断
    if(checkedNum == domArray.length){
        document.getElementById("one").checked=true;
    }else{
        document.getElementById("one").checked=false;
    }
}

jquery实现

//通过标题行选中状态控制数据行选中状态
//chckAll为全选checbox的id
$("#chckAll").click(function () {
//this.checked为全选checbox的选中状态	
//#tBody input[type='checkbox']为每行数据的checbox	
$("#tBody input[type='checkbox']").prop("checked",this.checked);
});
//功能2：数据行中checkbox选中状态影响标题行checkbox的选中状态（这里的数据行中的checkbox必须是页面加载完成后能与jquery函数绑定的，也就是说checkbox行必须是静态的）
$("#tBody input[type='checkbox']").click(function () {
//如果列表中所有的checkbox都处于选中状态,则"全选"按钮也选中
if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
              $("#chckAll").prop("checked",true);
}else{
//如果列表中所有的checkbox不是都处于选中状态,则"全选"按钮也取消
	    $("#chckAll").prop("checked",false);
	}
	});
	

如果下边的checkbox是拼接出来的，需要在查到数据后显示，可以用下面的方法执行功能二（即动态的）

//tBody为checkbox父标签（一般选择直接父标签），input[type='checkbox']为父标签下的子标签，也就是选中checkbox的标签
		$("#tBody").on("click","input[type='checkbox']",function () {
			//如果列表中所有的checkbox都处于选中状态,则"全选"按钮也选中
			if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
				$("#chckAll").prop("checked",true);
			}else{//如果列表中所有的checkbox不是都处于选中状态,则"全选"按钮也取消
				$("#chckAll").prop("checked",false);
			}
		});

on() 和 click() 的区别:

二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。