1 1 <!DOCTYPE html>
2 2 <html>
3 3 <head>
4 4 <meta charset="UTF-8">
5 5 <title></title>
6 6 </head>
7 7 <body>
8 8 <form action="" method="post">
9 9 你喜欢什么运动？<input type="checkbox" id="btn" value=""/> 全选/全不选<br />
10 10 <input type="checkbox" name="item" id="" value="" />篮球
11 11 <input type="checkbox" name="item" id="" value="" />足球
12 12 <input type="checkbox" name="item" id="" value="" />羽毛球
13 13 <input type="checkbox" name="item" id="" value="" />排球
14 14 </form>
15 15 <br />
16 16 <input type="button" id="btn1" value="全选"/>
17 17 <input type="button" id="btn2" value="全不选"/>
18 18 <input type="button" id="btn3" value="反选"/>
19 19 <input type="button" id="btn4" value="提交"/>
20 20 <script type="text/javascript">
21 21 window.onload = function(){
22 22 var btnall = document.getElementById("btn1");
23 23 var btnno = document.getElementById("btn2");
24 24 var btnrev = document.getElementById("btn3");
25 25 var btnsub = document.getElementById("btn4");
26 26 var btn = document.getElementById("btn");
27 27 var items =document.getElementsByName("item");
28 28 var len = items.length;
29 29 for(let i = 0; i<len ; i++){
30 30 items[i].onclick=()=>{
31 31 btn.checked = true;
32 32 for(let i=0; i<len ; i++){
33 33 if(!items[i].checked){
34 34 btn.checked=false;
35 35 }
36 36 }
37 37 }
38 38 }
39 39 btn.onclick=()=>{
40 40 for(let i = 0;i<len;i++){
41 41 items[i].checked=btn.checked;
42 42 }
43 43 }
44 44 btnall.onclick =()=>{
45 45 for(let i = 0; i< len ; i++){
46 46 items[i].checked = true;
47 47 btn.checked=items[i].checked;
48 48 }
49 49 }
50 50 btnno.onclick =()=>{
51 51 for(let i = 0; i< len ; i++){
52 52 items[i].checked = false;
53 53 btn.checked=items[i].checked;
54 54 }
55 55 }
56 56 btnrev.onclick =()=>{
57 57 for(let i = 0; i< len ; i++){
58 58 items[i].checked = !items[i].checked;
59 59 for(let i = 0;i<len;i++){
60 60 btn.checked=true;
61 61 for(let i = 0; i<len ; i++){
62 62 if(!items[i].checked){
63 63 btn.checked=items[i].checked;
64 64 }
65 65 }
66 66 }
67 67 }
68 68 }
69 69 btnsub.onclick =()=>{
70 70 for(let i = 0; i< len ; i++){
71 71 if(items[i].checked){
72 72 alert(items[i].nextSibling.nodeValue);
73 73 }
74 74 }
75 75 }
76 76 }
77 77 </script>
78 78 </body>
79 79 </html>
