页面上有10个多选框，实现三个按钮(重置、反选、全选)功能 

 1 <body>
 2 <br/>
 3 <button id="reset">重置</button> <button id="invert">反选</button> <button id="all">全选</button><br/>
 4 <br/>
 5 <input type="checkbox"><br/>
 6 <input type="checkbox"><br/>
 7 <input type="checkbox"><br/>
 8 <input type="checkbox"><br/>
 9 <input type="checkbox"><br/>
10 <input type="checkbox"><br/>
11 <input type="checkbox"><br/>
12 <input type="checkbox"><br/>
13 <input type="checkbox"><br/>
14 <input type="checkbox">
15 <script>
16     var reset=document.getElementById('reset');
17     var invert=document.getElementById('invert');
18     var all=document.getElementById('all');
19     var checkBox=document.getElementsByTagName('input');
20     reset.addEventListener('click',function () {
21         for(var i=0;i<checkBox.length;i++){
22             checkBox[i].checked=false;
23         }
24     });
25     invert.addEventListener('click',function () {
26         for(var i=0;i<checkBox.length;i++){
27            checkBox[i].checked=!checkBox[i].checked;
28         }
29     });
30     all.addEventListener('click',function () {
31         for(var i=0;i<checkBox.length;i++){
32             checkBox[i].checked=true;
33         }
34     })
35 </script>
36 </body>

 

posted @ 2017-04-25 23:26  透明的月儿  阅读(401)  评论(0)    收藏  举报