复选框与全选框的选中状态的联动
Posted 哈哈敲敲
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了复选框与全选框的选中状态的联动相关的知识，希望对你有一定的参考价值。
类似在网购时在购物车选择商品时的复选框与全选框的联动事件
对于原型，构造函数之类的还不熟，强行用了一波，结果写得又长又臭。
但总算功能还是做出来了，总要多实践才会变熟的。全部代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>checkbox</title> <style> .container{ width:30% ; height: 200px; border:1px solid #333; margin:0 auto; padding: 50px 0 0 50px; } .container .top{ margin:0 0 20px 0 ; } .container input{ outline: none; } .container .bottom{ margin:10px 0 0 0; } .bottom .submit{ outline: none; border:0; background: none; border:1px solid #333; width:50px; height:30px; } </style> </head> <body> <div class="container"> <div class="top"> <input type="checkbox" class="check" checked="checked" name="1">1 <input type="checkbox" class="check" checked="checked" name="2">2 <input type="checkbox" class="check" checked="checked" name="3">3 </div> <div class="main"> <input type="checkbox" class="all" checked="checked">全选 <input type="checkbox" class="reverse" >反选 </div> <div class="bottom"> <button class="submit">结算</button><small>(只能点一次)</small> </div> </div> <script> //所有复选框默认为选中状态，因此全选的框也是默认为选中状态 function Check(){ this.inputList=document.querySelectorAll(‘.check‘); this.all=document.querySelector(‘.all‘); this.reverse=document.querySelector(‘.reverse‘); this.submit=document.querySelector(‘.submit‘); } Check.prototype.init=function(){ this.choose() this.chooseAll() this.creverse() this.csubmit() } /*点击单个复选框。 固定事件：当前框若是选中状态，就取消选中，若当前框为非选中状态，则相反 可能事件（主要是与全选框的联动）： 情况1：全选框处于选中状态(就是所有的框都是选中状态的情况下)，若是当前框取消选中的话，，则全选框也会取消选中 情况2：全选框处于非选中状态，而且除当前框的其它所有框都是选中状态的情况下，若是当前框被选中，那么全选也会自动变成选中状态 */ Check.prototype.choose=function(){ var len=this.inputList.length, list=this.inputList, all=this.all, self=this; for(var i=0;i<len;i++){ list[i].addEventListener(‘click‘,function(){ if(this.getAttribute(‘checked‘)==‘checked‘){ this.setAttribute(‘checked‘,‘‘) all.setAttribute(‘checked‘,‘‘) all.checked=false }else{ this.setAttribute(‘checked‘,‘checked‘) if(self.isChecked()){ all.setAttribute(‘checked‘,‘checked‘) all.checked=true } } },false) } } //检测全部复选框是否选中 Check.prototype.isChecked=function(){ return [].every.call(this.inputList,function(item,index){ if(item.getAttribute(‘checked‘)==‘checked‘){ return true }else{ return false } }) } //点击全选框的事件 Check.prototype.chooseAll=function(){ var all=this.all, list=this.inputList; all.addEventListener(‘change‘,function(){ if(all.getAttribute(‘checked‘)==‘checked‘){ all.setAttribute(‘checked‘,‘‘) for(var i=0;i<list.length;i++){ list[i].checked=false list[i].setAttribute(‘checked‘,‘‘) } }else{ for(var i=0;i<list.length;i++){ list[i].checked=true list[i].setAttribute(‘checked‘,‘checked‘) } all.setAttribute(‘checked‘,‘checked‘) } },false) } //点击反选框的事件，本来是不打算加这个事件的，反正只是练习，多写点也无所谓啦 Check.prototype.creverse=function(){ var all=this.all, list=this.inputList, reverse=this.reverse, self=this; reverse.addEventListener(‘change‘,function(){ if(reverse.getAttribute(‘checked‘)==‘checked‘){ for(var i=0;i<list.length;i++){ if(list[i].getAttribute(‘checked‘)==‘checked‘){ list[i].setAttribute(‘checked‘,‘‘) list[i].checked=false }else{ list[i].checked=true list[i].setAttribute(‘checked‘,‘checked‘) } } if(self.isChecked()){ all.checked=true; all.setAttribute(‘checked‘,‘checked‘) }else{ all.checked=false; all.setAttribute(‘checked‘,‘‘) } }else{ for(var i=0;i<list.length;i++){ if(list[i].getAttribute(‘checked‘)==‘checked‘){ list[i].setAttribute(‘checked‘,‘‘) list[i].checked=false }else{ list[i].checked=true list[i].setAttribute(‘checked‘,‘checked‘) } } if(self.isChecked()){ all.checked=true; all.setAttribute(‘checked‘,‘checked‘) }else{ all.checked=false; all.setAttribute(‘checked‘,‘‘) } } },false) } //点击结算的事件 Check.prototype.csubmit=function(){ var btn=this.submit, list=this.inputList, arr=[], one=true; btn.addEventListener(‘click‘,function(){ if(one){ [].forEach.call(list,function(item,index){ if(item.getAttribute(‘checked‘)==‘checked‘){ arr.push(item.getAttribute(‘name‘)) } }) one=false alert(arr) } },false) } var check=new Check(); check.init() </script> </body> </html>
以上是关于复选框与全选框的选中状态的联动的主要内容，如果未能解决你的问题，请参考以下文章
vue基于element实现表格中点击某一行全选框选中此行所有选框