1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>全选示例</title> 6 </head> 7 <body> 8 <input type="checkbox" id="ckBox" onclick="selAllNo()" />全选/全不选 9 <br> 10 <input type="checkbox" name="hobby" onclick="check()" />篮球 11 <br> 12 <input type="checkbox" name="hobby" onclick="check()" />足球 13 <br> 14 <input type="checkbox" name="hobby" onclick="check()" />羽毛球 15 <br> 16 <input type="checkbox" name="hobby" onclick="check()" />乒乓球 17 <br> 18 <input type="button" value="全选" onclick="selAll()" /> 19 <input type="button" value="全不选" onclick="selNo()" /> 20 <input type="button" value="反选" onclick="deSel()" /> 21 <script type="text/javascript"> 22 // 获取全选/全不选复选框 23 var ckBox = document.getElementById("ckBox"); 24 // 获取到要操作的复选框 25 var hobbies = document.getElementsByName("hobby"); 26 // 如果有一个没有选，那么去掉全选/全不选复选框 27 function check() { 28 for (var i = 0; i < hobbies.length; i++) { 29 // 只要有一个未选中，就设置复选框为未选中，并跳出循环 30 if (!hobbies[i].checked) { 31 ckBox.checked = false; 32 break; 33 } else { 34 // 如果全部都为选中，设置复选框为选中 35 ckBox.checked = true; 36 } 37 } 38 } 39 // 全选 40 function selAll() { 41 for (var i = 0; i < hobbies.length; i++) { 42 hobbies[i].checked = true; 43 } 44 ckBox.checked = true; 45 } 46 // 全不选 47 function selNo() { 48 for (var i = 0; i < hobbies.length; i++) { 49 hobbies[i].checked = false; 50 } 51 ckBox.checked = false; 52 } 53 // 全选/全不选 54 function selAllNo() { 55 if (ckBox.checked) { 56 for (var i = 0; i < hobbies.length; i++) { 57 hobbies[i].checked = true; 58 } 59 } else { 60 for (var i = 0; i < hobbies.length; i++) { 61 hobbies[i].checked = false; 62 } 63 } 64 } 65 // 反选 66 function deSel() { 67 for (var i = 0; i < hobbies.length; i++) { 68 // 选中的设为未选中，未选中的设为选中 69 hobbies[i].checked = (hobbies[i].checked) ? false : true; 70 } 71 // 检查反选是否有未选中的 72 check(); 73 } 74 </script> 75 </body> 76 </html>
