.
.
.
.
.
復選框的全選、全不選與反選非常常用，實現的方法也比較多。今天寫這個是用按鈕來控制的，當然也可以使用復選框本身來控制。
好了，廢話不多說，直接上代碼，看代碼就是最直接的學習方式。
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>
很簡單吧，幾句話就搞定了。如果有什么疑問歡迎留言交流。