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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值