復選框為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>