checkbox框的各种状态选择

首先是画面上的效果

      

js中的实现逻辑

/**
 * 选择框点击事件
 */
function checkBoxClick(){
	var _this = $(this); //获取当前对象的jquery对象
	var _parent = _this.parent().parent(); //获取当前对象父父的jquery对象
	if(!_parent.hasClass("operate")){ //如果不是全选box的话
		var _len1 = $(".detail input[type='checkbox']").length; //①取得detail下的checkbox个数①
		var _len2 = $(".detail input:checked").length;	//②取得当前选中的checkbox个数
		if(_len1 == _len2){	//①=②
			$(".operate input[type='checkbox']").prop("checked",true);  //operate中的全选box设置为选中状态
		} else {
			$(".operate input[type='checkbox']").prop("checked",false);	//operate中的全选box设置为非选中状态
		}
	} else {	//如果是全选box的话
		if(_this.is(":checked")){//同时是选中状态的话
			$(".detail input[type='checkbox']").prop("checked",true);//把所有的detail下的checkbox选中
		} else {
			$(".detail input[type='checkbox']").prop("checked",false);//把所有的detail下的checkbox不选中
		}
	}
}