js复选框实现全选全不选反选
Posted 独挽离人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js复选框实现全选全不选反选相关的知识，希望对你有一定的参考价值。
复选框为checkbox对象
通过input就可以将一个简单的复选框呈现在页面上
<input type="checkbox" />
要实现的大概就是这样一个页面
思路
全选
因为要得到复选框数组，而id又不能重复。所以通过name来得到复选框数组。得到数组后遍历，将所有checked值设置为true即可实现全选，全不选原理相同
反选
同样的方法得到复选框数组，遍历的时候判断如果checked值为true则改为false，checked值为false则改为true
最上面的全选/全不选功能
通过id获得最上面的复选框，判断其checked值若为true则将所有的复选框设置为true,为false则设置为false
注意
为什么不是true的时候设置为false呢？因为当点击的时候复选框已发生变化，这个时候，下面的复选框应该是与上面一致的
源代码如下
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>复选框</title> 7 8 <style type="text/css"> 9 10 </style> 11 </head> 12 13 <body> 14 <input type="checkbox" id="boxid" onclick="setAllNo()" />全选/全不选 15 <br /> 16 <input type="checkbox" name="love" />篮球 17 <br /> 18 <input type="checkbox" name="love" />排球 19 <br /> 20 <input type="checkbox" name="love" />羽毛球 21 <br /> 22 <input type="checkbox" name="love" />乒乓球 23 <br /> 24 <input type="button" value="全选" onclick="setAll()" /> 25 <input type="button" value="全不选" onclick="setNo()" /> 26 <input type="button" value="反选" onclick="setOthers()" /> 27 28 <script type="text/javascript"> 29 //全选函数 30 function setAll() { 31 var loves = document.getElementsByName("love"); 32 for (var i = 0; i < loves.length; i++) { 33 loves[i].checked = true; 34 } 35 } 36 37 //全不选函数 38 function setNo() { 39 var loves = document.getElementsByName("love"); 40 for (var i = 0; i < loves.length; i++) { 41 loves[i].checked = false; 42 } 43 } 44 45 //反选 46 function setOthers() { 47 var loves = document.getElementsByName("love"); 48 for (var i = 0; i < loves.length; i++) { 49 if (loves[i].checked == false) 50 loves[i].checked = true; 51 else 52 loves[i].checked = false; 53 } 54 } 55 56 //全选/全不选操作 57 function setAllNo(){ 58 var box = document.getElementById("boxid"); 59 var loves = document.getElementsByName("love"); 60 if(box.checked == false){ 61 for (var i = 0; i < loves.length; i++) { 62 loves[i].checked = false; 63 } 64 }else{ 65 for (var i = 0; i < loves.length; i++) { 66 loves[i].checked = true; 67 } 68 } 69 } 70 </script> 71 72 </body> 73 74 </html>
以上是关于js复选框实现全选全不选反选的主要内容，如果未能解决你的问题，请参考以下文章