首先来展示一下
上图中实现的功能是:
- 点击顶部全选框选中,全部的框都会选中,反之就会全不选中;
- 当表体中选框全部选中时,全选框选中
- 当点击反选按钮时,表体中的选框状态置反,选中的变为没选中,没选中变为选中
直接上代码,我就不贴表格样式部分代码了,只贴js实现部分
<script>
//1, 全选全不选
var all=document.getElementById("all");
var tds=document.querySelectorAll("tbody tr input");//获取表体部分的选框
console.log(tds);
var flag=true;
all.onclick=function(){
flag=all.checked;
if(flag){
//如果全选框是选中状态,全部复选框选中
check();
}
else{//取消全选按钮,全部复选框取消
check();
}
}
function check(){
for(var i=0;i<tds.length;i++){
tds[i].checked=flag;
}
}
//2,当底下选项全部选中时,全选按钮选中
for(var i=0;i<tds.length;i++){
tds[i].onclick=judge;
}
function judge(){
var flag_two=true;//用于记录是否全部选中
for(var i=0;i<tds.length;i++){//每次点击都判断一下是否全部选中
if(!tds[i].checked){
flag_two=false;//但凡有一个没有选中,状态标记置为false
}
}
all.checked=flag_two; //把标记状态赋给全选按钮,功能完成
}
//3,反选
var btn=document.getElementById("reverse");
btn.onclick=function(){
var flag_three=true;//依旧是标记状态
for(var i=0;i<tds.length;i++){
tds[i].checked=tds[i].checked?false:true;
}
}
</script>
现在来捋一下思路:
- 获取元素:全选框,表体中选框,按钮,具体用什么方法获取自行选择
- 全选功能:定义一个变量flag记录全选框状态,遍历表体的选框,将flag的状态值赋给每一个选框
- 表体选框满选同步全选框功能:依旧是定义一个flag_two变量记录状态,每点击一次表体中选框,都要判断每一个表体选框是否有没选中的,如果有,就将flag_two置为false(默认是true),将flag_two的状态赋给全选框
- 反选功能:点击按钮之后,遍历表体选框(表单属性的checked属性是通过布尔值改变状态的),checked属性为true的就改为false,为false的就改为true