首先是画面上的效果
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不选中
}
}
}