实现当单击全选或全不选，按钮时实现复选框和全不选操作

Question

 

Answer 1

<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>

循环实现