復選框為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>
例子2
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>全選，反選按鈕</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 /* 9 *1 #checkedAllBtn 10 * 2 #checkedBoBtn 11 * 3 #checkedRevBtn 12 * 4 #sendBtn 13 * 5 #checkedAllBox 14 * 6 #items 15 * */ 16 17 var checkedAllBtn = document.getElementById("checkedAllBtn"); 18 //checkedAllBox 19 var checkedAllBox = document.getElementById("checkedAllBox"); 20 21 checkedAllBtn.onclick = function(){ 22 23 //獲取四個多選框items 24 var items = document.getElementsByName('items'); 25 26 //遍歷items 27 for(var i=0;i<items.length;i++) 28 { 29 //設置四個多選框變成選中狀態 30 //通過多選框的checked屬性可獲取或設置選中狀態 31 items[i].checked = true; 32 33 } 34 35 //將checkedAllBox設置為選中狀態 36 checkedAllBox.checked = true; 37 38 39 }; 40 41 //全不選按鈕 42 var checkedNoBtn = document.getElementById("checkedNoBtn"); 43 44 checkedNoBtn.onclick = function(){ 45 //獲取四個多選框items 46 var items = document.getElementsByName('items'); 47 48 //遍歷items 49 for(var i=0;i<items.length;i++) 50 { 51 //設置四個多選框變成選中狀態 52 //通過多選框的checked屬性可獲取或設置選中狀態 53 items[i].checked = false; 54 55 } 56 57 //將checkedAllBox設置為選中狀態 58 checkedAllBox.checked = false; 59 60 }; 61 62 //反選 也要判斷是否都需要全部選中 63 var checkedRevBtn = document.getElementById("checkedRevBtn"); 64 65 checkedRevBtn.onclick = function(){ 66 //獲取四個多選框items 67 var items = document.getElementsByName('items'); 68 69 checkedAllBox.checked = true; 70 71 //遍歷items 72 for(var i=0;i<items.length;i++) 73 { 74 //設置四個多選框變成選中狀態 75 //通過多選框的checked屬性可獲取或設置選中狀態 76 items[i].checked = !items[i].checked; 77 78 79 if(!items[i].checked){ 80 //一旦進入判斷，則證明不是全選狀態 81 //將checkedAllBox設置為沒選中狀態 82 checkedAllBox.checked = false; 83 84 } 85 86 } 87 88 }; 89 90 //提交按鈕 91 var sendBtn = document.getElementById("sendBtn"); 92 sendBtn.onclick = function(){ 93 var items = document.getElementsByName('items'); 94 //遍歷 items 95 for(var i=0; i<items.length;i++) 96 { 97 //判斷多選框是否選中 98 if(items[i].checked){ 99 alert(items[i].value); 100 } 101 } 102 }; 103 104 105 checkedAllBox.onclick = function(){ 106 var items = document.getElementsByName('items'); 107 108 //遍歷items 109 for(var i=0;i<items.length;i++) 110 { 111 //設置四個多選框變成選中狀態 112 items[i].checked = this.checked; 113 114 } 115 116 117 118 119 120 }; 121 122 //items 123 124 //如果四個多選框全都選中，則checkedAllBox也應該選中 125 //如果四個多選框都沒選中，則checkedAllBox也應該沒選中 126 var items = document.getElementsByName('items'); 127 //為四個多選框分別綁定點擊響應函數 128 for(var i=0 ; i<items.length ; i++){ 129 items[i].onclick = function(){ 130 131 //將checkedAllBox設置為選中狀態 132 checkedAllBox.checked = true; 133 134 for(var j=0 ; j<items.length ; j++){ 135 //判斷四個多選框是否全選 136 //只要有一個沒選中則就不是全選 137 if(!items[j].checked){ 138 //一旦進入判斷，則證明不是全選狀態 139 //將checkedAllBox設置為沒選中狀態 140 checkedAllBox.checked = false; 141 //一旦進入判斷，則已經得出結果，不用再繼續執行循環 142 break; 143 } 144 145 } 146 147 148 149 }; 150 } 151 152 153 } 154 155 </script> 156 </head> 157 <body> 158 159 <form method="post" action=""> 160 你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 161 162 <br /> 163 <input type="checkbox" name="items" value="足球" />足球 164 <input type="checkbox" name="items" value="籃球" />籃球 165 <input type="checkbox" name="items" value="羽毛球" />羽毛球 166 <input type="checkbox" name="items" value="乒乓球" />乒乓球 167 <br /> 168 <input type="button" id="checkedAllBtn" value="全 選" /> 169 <input type="button" id="checkedNoBtn" value="全不選" /> 170 <input type="button" id="checkedRevBtn" value="反 選" /> 171 <input type="button" id="sendBtn" value="提 交" /> 172 </form> 173 </body> 174 </html>
