.
.
.
.
.
复选框的全选、全不选与反选非常常用，实现的方法也比较多。今天写这个是用按钮来控制的，当然也可以使用复选框本身来控制。
好了，废话不多说，直接上代码，看代码就是最直接的学习方式。
1 <html> 2 <head> 3 <title>checkbox test</title> 4 <script type="text/javascript"> 5 function $(id) { return document.getElementById(id); } 6 /** 7 * 选择复选框 8 * @param type 1 全选；0 全不选 9 * @author yuhuashi 10 * @Date 2012-12-29 11 */ 12 function checkAll(type) { 13 type = Number(type); 14 var inputs = document.getElementsByTagName("input"); 15 for(var i = 0; i < inputs.length; i++) { 16 if(inputs[i].type == "checkbox") { 17 inputs[i].checked = type; 18 } 19 } 20 setCheckType(type); 21 } 22 23 /** 24 * 设置按钮文字和选择标识 25 * @param type 1 全选；0 全不选 26 * @author yuhuashi 27 * @Date 2012-12-29 28 */ 29 function setCheckType(type) { 30 var btnSelect = $("btnSelect"); 31 if(type) { 32 btnSelect.value = "全不选"; 33 } else { 34 btnSelect.value = "全选"; 35 } 36 fm.hidnSelectFlag.value = Number(!type); 37 } 38 39 /** 40 * 反选 41 * @author yuhuashi 42 * @Date 2012-12-29 43 */ 44 function checkOpposite() { 45 var inputs = document.getElementsByTagName("input"); 46 var checkboxLength = 0; // 所有复选框的数量 47 var selectedCount = 0; // 所有被选中的复选框数量 48 var checkType = false; 49 for(var i = 0; i < inputs.length; i++) { 50 if(inputs[i].type == "checkbox") { 51 inputs[i].checked = !inputs[i].checked; 52 checkType = inputs[i].checked; 53 checkboxLength++; 54 if(checkType) { selectedCount++; } 55 } 56 } 57 if((checkboxLength == selectedCount) || (!selectedCount)) { 58 setCheckType(checkType); 59 } 60 } 61 </script> 62 </head> 63 64 <body> 65 <form name="fm" action="#" method="post"> 66 <input type="checkbox" name="" value=""/><br/> 67 <input type="checkbox" name="" value=""/><br/> 68 <input type="checkbox" name="" value=""/><br/> 69 <input type="checkbox" name="" value=""/><br/> 70 <input type="checkbox" name="" value=""/><br/> 71 <input type="button" id="btnSelect" value="全选" onclick="checkAll(fm.hidnSelectFlag.value)"/> 72 <input type="hidden" name="hidnSelectFlag" value="1"/> 73 <input type="button" value="反选" onclick="checkOpposite()"/> 74 </form> 75 </body> 76 </html>
很简单吧，几句话就搞定了。如果有什么疑问欢迎留言交流。