主要功能代码如下
点下面这个超链接去我的github下载这个文件,打开即可运行
点此下载
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function(){
var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
var i = 0 ; len = checkboxs.length;
for( ;i < len ; i++){
var checkbox = checkboxs[i];
checkbox.checked = this.checked;
}
}
var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
var i = 0 ; len = checkboxs.length;
var n = 0 ;
for( ;i < len ; i++){
var checkbox = checkboxs[i];
checkbox.onclick = function(){
//假设所有子的checked都被选中了
var isAllChecked = true;
for(i = 0; i<len ; i++){
checkbox = checkboxs[i];
if(checkbox.checked != true){
isAllChecked = false;
break;
}
}
j_cbAll.checked = isAllChecked;
}
}
// 反选
var btn = document.getElementById('btn');
btn.onclick = function(){
var checkboxs = document.querySelectorAll('#j_tb input[type=checkbox]');
var i = 0 ; len = checkboxs.length;
for( ;i < len ; i++){
var checkbox = checkboxs[i];
checkbox.checked = !checkbox.checked;
}
//此处要对父checked进行操作
// 如果有一个子checked没被选中,那么父checked也不被选中,否则都选中
for(i = 0; i<len ; i++){
var checkbox = checkboxs[i];
if(checkbox.checked != true){
j_cbAll.checked = false;
break;
}else{
j_cbAll.checked = true;
}
}
}
下面是效果图,样式不是重点,不要纠结