js实现复选框的全选、全不选和反选

2018-10-23 03:06:03来源：博客园阅读 ()

js实现复选框的全选、全不选和反选

主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态

实现代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>复选框的选择</title>
 6     <style>
 7         #btn{
 8             margin: 5px auto;
 9         }
10         #btn>input{
11             font-size: 16px;
12             color: #fff;
13             background-color: rgb(110, 34, 182);
14             outline: none;
15         }
16         #city{
17             background-color: aqua;
18         }
19     </style>
20 
21     <script>
22         window.onload=function(){
23 
24             var obt1 = document.getElementById('btn1');
25             var obt2 = document.getElementById('btn2');
26             var obt3 = document.getElementById('btn3');
27             var ocity = document.getElementById('city');
28             var oinput = ocity.getElementsByTagName('input');
29 
30             obt1.onclick=function(){
31                 for(var i=0;i<oinput.length;i++)
32                 {
33                     oinput[i].checked=true;
34                 }
35             }
36             obt2.onclick=function(){
37                 for(var i=0;i<oinput.length;i++)
38                 {
39                     oinput[i].checked=false;
40                 }
41             }
42             obt3.onclick=function(){
43                 for(var i=0;i<oinput.length;i++)
44                 {
45                     if(oinput[i].checked==false)
46                     {
47                         oinput[i].checked=true;
48                     }else{
49                         oinput[i].checked=false;
50                     }
51                 }
52             }
53         }
54     </script>
55 </head>
56 <body>
57     <div id="btn">
58         <input type="button" id="btn1" value="全选">
59         <input type="button" id="btn2" value="全不选">
60         <input type="button" id="btn3" value="反选">
61     </div>
62     <div id="city">
63         <input type="checkbox">北京<br>
64         <input type="checkbox">上海<br>
65         <input type="checkbox">广州<br>
66         <input type="checkbox">深圳<br>
67         <input type="checkbox">武汉<br>
68     </div>
69 </body>
70 </html>