js实现全选，全不选和反选功能

首先来展示一下

上图中实现的功能是：

• 点击顶部全选框选中，全部的框都会选中，反之就会全不选中；
• 当表体中选框全部选中时，全选框选中
• 当点击反选按钮时，表体中的选框状态置反，选中的变为没选中，没选中变为选中

直接上代码，我就不贴表格样式部分代码了，只贴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