简化版:
//复选框 par 包含全选和复选框的最外围父元素,这个函数适合有多个全选和单选的模块的页面 function Check(par) { this.all = par.querySelector('.all') //全选框的class为all this.one = par.querySelectorAll('.one') //单个复选框的class为one this.init() } Check.prototype = { constructor: Check, init: function () { this.chooseAll() this.chooseOne() }, chooseAll: function () { //选择全部 var self = this this.all.addEventListener( 'click', function () { if (this.checked) { [].map.call(self.one, (function (item) { item.checked = true })) } else { [].map.call(self.one, (function (item) { item.checked = false })) } }, false ) }, chooseOne:function(){ //选择单个 var self = this; [].forEach.call(self.one,function(item){ item.addEventListener( 'click', function(){ if(self.isAllChecked()){ self.all.checked = true }else{ self.all.checked = false } }, false ) }) }, isAllChecked:function(){ //检测是否全部选中 var self = this var isChecked = false; isChecked = [].every.call(self.one,function(item){return item.checked}) return isChecked } }
类似在网购时在购物车选择商品时的复选框与全选框的联动事件
对于原型,构造函数之类的还不熟,强行用了一波,结果写得又长又臭。
但总算功能还是做出来了,总要多实践才会变熟的。全部代码如下:
<!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{ 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; 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>