思路:通過選擇全選的選框的狀態stuts 即true/false控制其他選框。
首先 我們要通過.checked方法獲取選框(全選/全不選)的值。
function all(){ var stuts=document.getElementById("xuan").checked; console.log(stuts); }
此時控制台會打印選中(true)和不選中(false)的值。
通過getElementsName獲取名字相同的checke選框成一個集合,在通過遍歷集合更改每個選框的狀態值。
c[i].checked=stuts;
反選就是讓狀態值相反即可
c[i].checked=!c[i].checked;
源碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="checkbox" name="c">1<br> 9 <input type="checkbox" name="c">2<br> 10 <input type="checkbox" name="c">3<br> 11 <input type="checkbox" name="c">4<br> 12 <input type="checkbox" name="c">5<br> 13 <input type="checkbox" name="c">6<br> 14 <input type="checkbox" name="c">7<br> 15 <hr> 16 17 <input type="checkbox" id="xuan" onchange="a()">全選/全不選<br> 18 <input type="button" id="fan" onclick="fan()" value="反選"> 19 20 <script> 21 function a() { 22 var stuts=document.getElementById("xuan").checked; 23 var c=document.getElementsByName("c"); 24 for(var i=0;i<c.length;i++){ 25 c[i].checked=stuts; 26 } 27 } 28 function fan() { 29 var stuts=document.getElementById("fan"); 30 var c=document.getElementsByName("c"); 31 for(var i=0;i<c.length;i++){ 32 c[i].checked=!c[i].checked; 33 } 34 } 35 </script> 36 </body> 37 </html>