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
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用JavaScript和HTML DOM来实现全选全不选反选功能。以下是一个示例代码: HTML部分: ``` <!DOCTYPE html> <html> <head> <title>全选全不选反选</title> <script src="checkbox.js"></script> </head> <body> <form name="myForm"> <input type="checkbox" name="chk1" value="1">选项1<br> <input type="checkbox" name="chk2" value="2">选项2<br> <input type="checkbox" name="chk3" value="3">选项3<br> <input type="checkbox" name="chk4" value="4">选项4<br> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="全不选" onclick="uncheckAll()"> <input type="button" value="反选" onclick="reverseCheck()"> </form> </body> </html> ``` JavaScript部分: ``` function checkAll() { var checkboxes = document.getElementsByName("myForm"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = true; } } function uncheckAll() { var checkboxes = document.getElementsByName("myForm"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = false; } } function reverseCheck() { var checkboxes = document.getElementsByName("myForm"); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = !checkboxes[i].checked; } } ``` 在以上示例代码中,首先创建了一个包含多个复选框和三个按钮的HTML表单。然后,使用JavaScript编写了三个函数,分别用于实现全选全不选反选功能。这些函数使用`getElementsByName()`方法来获取表单中的所有复选框,并使用循环来设置复选框的选中状态。其中,`checkAll()`函数将所有复选框设置为选中状态,`uncheckAll()`函数将所有复选框设置为未选中状态,`reverseCheck()`函数将所有复选框的选中状态取反。最后,将这些函数绑定到HTML表单中的按钮上,当用户单击这些按钮时,就可以实现全选全不选反选功能

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值