JS-复选框全选与取消全选

最新推荐文章于 2019-09-04 16:50:28 发布

weixin_30687587

最新推荐文章于 2019-09-04 16:50:28 发布

阅读量116

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiuxiu123456/p/8461223.html

版权

checked：设置或者返回checkbox是否应被选中

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>复选框全选和取消(checked)</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         function checkAll(){
14             //1.获取所有的“爱好”
15             var aihaos=document.getElementsByName("aihao");
16             //2.所有的爱好作为一个数组形式被遍历
17             //3.选中时，所有爱好都应该被选中
18             /*for(var i=0;i<aihaos.length;i++){
19                 aihaos[i].checked=true;
20             }*/
21             //4.未选中时全部取消选中
22             var firstCheck=document.getElementById("quanxuan");
23             if(firstCheck.checked){
24                     for(var i=0;i<aihaos.length;i++){
25                     aihaos[i].checked=true;
26                 }
27             }else{
28                 for(var i=0;i<aihaos.length;i++){
29                     aihaos[i].checked=false;
30                 }
31             }
32         }
33         function checkOne(){
34             //所有爱好都选中则全选选中，否则全选未选中
35             //1.获取所有爱好
36             var aihaos=document.getElementsByName("aihao");
37             var checkCount=0;
38             //2.查看有多少个爱好 aihaos.length==checkCount
39             //3.计数有多少个爱好是选中状态
40             for(var i=0;i<aihaos.length;i++){
41                 if(aihaos[i].checked) checkCount++
42             }
43             //4.如果选中的爱好等于所有的爱好，则设置全选框为选择状态
44             var firstCheck=document.getElementById("quanxuan");
45             firstCheck.checked=(aihaos.length==checkCount);
46 
47         }
48 
49     </script>
50 
51     <input type="checkbox" id="quanxuan" value="爱好" οnclick="checkAll()"><br><br>
52     <input type="checkbox" name="aihao" value="抽烟" οnclick="checkOne()">抽烟<br>
53     <input type="checkbox" name="aihao" value="喝酒" οnclick="checkOne()">喝酒<br>
54     <input type="checkbox" name="aihao" value="烫头" οnclick="checkOne()">烫头<br>
55   
56  </body>
57 </html>