checkbox框的各种状态选择

来源：互联网发布：工信部网站域名查询编辑：程序博客网时间：2024/05/01 17:13

首先是画面上的效果

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不选中}}}

1 0