全选单选功能ES5实现
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <ul> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>单选项<input type="checkbox" class="checkbox-item"></li> <li>全选<input type="checkbox" class="checkbox-all"></li> </ul> </body> <script> //单选项 let aCheckBox=document.querySelectorAll('.checkbox-item'); //全选 let checkAll=document.querySelector('.checkbox-all'); //是否满足全选条件 function isCheckAll(){ let resArr=[]; aCheckBox.forEach(function(item,index){ if(!item.checked){ resArr.push(false) } }) return resArr.length===0 } //单选项点击事件 for(var i=0;i<aCheckBox.length;i++){ aCheckBox[i].onclick=function(){ if(isCheckAll()){ checkAll.checked=true }else{ checkAll.checked=false } } } //全选项点击事件 checkAll.onclick=function(){ if(this.checked){ aCheckBox.forEach(function(item,index){ item.checked=true }) }else{ aCheckBox.forEach(function(item,index){ item.checked=false }) } } </script> </html> |
全选单选功能ES6实现
|
1 2 3 4 5 6 7 |
/* 更改其中的是否满足全选条件方法 */ function isCheckAll(){ return [...aCheckBox].every(item=>item.checked) } |
来访学习学习
