复选框为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 ????????????????else52 ????????????????????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复选框实现全选、全不选、反选
原文地址：https://www.cnblogs.com/StriveE2/p/9356655.html