js实现复选框的全选、全不选和反选
程序员文章站
2022-06-22 13:18:30
js实现复选框的全选、全不选和反选 主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态 实现代码 结果 ......
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>
结果