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

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

循环实现

document.getElementById('checkAll').onclick = function(){
    if (!this.checked) return;
    var els = document.getElementsByName('checkbox')
    for(var i=0;i<els.length;i++){
        els[i].checked = true;
    }
}
document.getElementById('checkNo').onclick = function(){
    if (!this.checked) return;
    var els = document.getElementsByName('checkbox')
    for(var i=0;i<els.length;i++){
        els[i].checked = true;
    }
}

代码如下：{如果对你有帮助，可以给我个采纳吗，谢谢!! 点击我这个回答右上方的【采纳】按钮}。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
</head>
<body>
<input type="checkbox" class="checkboxClass" value="" />A <br />
<input type="checkbox" class="checkboxClass" value="" />B <br />
<input type="checkbox" class="checkboxClass" value="" />C <br />
<input type="checkbox" class="checkboxClass" value="" />D <br />
<input type="button" value="全选" onclick="func(true);" />
<input type="button" value="全不选" onclick="func(false);" />
<script type="text/javascript">
function func(x) {
	var arr = document.querySelectorAll(".checkboxClass");
	for (var i = 0; i < arr.length; i++) {
		arr[i].checked = x;
	}
}
</script>
</body>
</html>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632