全选反选全不选

最新推荐文章于 2022-05-05 19:13:55 发布

转载最新推荐文章于 2022-05-05 19:13:55 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaomume/p/4710840.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>8.6第四题</title>
 6 </head>
 7 <body>
 8     <div><input type="checkbox">徐楚莹</div>
 9     <div><input type="checkbox">高宇轩</div>
10     <div><input type="checkbox">陈奕诺</div>
11     <div><input type="checkbox">吴丹霞</div>
12     <div><input type="checkbox">刘媛媛</div>
13     <button onclick="doCheck('checkAll')">全选</button>
14     <button onclick="doCheck('unCheckAll')">全不选</button>
15     <button onclick="doCheck('invers')">反选</button>
16     
17     <script>
18         function doCheck(type){
19             var inputs=document.getElementsByTagName("input");
20             for(var i=0;i<inputs.length;i++){
21                 if(type=="checkAll"){
22                     inputs[i].checked=true;
23                 }else if(type=="unCheckAll"){
24                     inputs[i].checked=false;
25                 }else{
26                     inputs[i].checked=!inputs[i].checked;
27                 }
28             }
29         }
30     </script>
31 </body>
32 </html>