全选全不选与反选（JS） 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <meta charset="utf-8">
 6 </head>
 7 <body>
 8 <input type="checkbox" name="">全选
 9 <input type="checkbox" name="">全不选
10 <input type="checkbox" name="">反选
11 <hr>
12 <input type="checkbox" name="">
13 <input type="checkbox" name="">
14 <input type="checkbox" name="">
15 <input type="checkbox" name="">
16 <input type="checkbox" name="">
17 <input type="checkbox" name="">
18 <script type="text/javascript">
19     var ins = document.getElementsByTagName('input');
20     ins[0].onclick = function(){
21         var state = ins[0].checked;
22         if(state){
23             ins[1].checked = !state;
24             ins[2].checked = !state;
25             for (var i = ins.length - 1; i >= 3; i--) {
26                 ins[i].checked = state;
27             }
28         }
29     }
30     ins[1].onclick = function(){
31         var state = ins[1].checked;
32         if(state){
33             ins[0].checked = !state;
34             ins[2].checked = !state;
35             for (var i = ins.length - 1; i >= 3; i--) {
36                 ins[i].checked = !state;
37             }
38         }
39     }
40     ins[2].onclick = function(){
41         var state = ins[2].checked;
42         var    state_1 = ins.checked;
43         ins[0].checked = false;
44         ins[1].checked = false;
45         for (var i = ins.length - 1; i >= 3; i--) {
46             ins[i].checked = !ins[i].checked;
47         }
48     }
49 </script>
50 </body>
51 </html>

 

posted on 2018-08-06 22:36  山外青楼  阅读(98)  评论(0)    收藏  举报

导航