js实现全选，全不选，反选 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 
 7 </head>
 8 <body>
 9         <ul>
10                 <li><input type="checkbox" name="sports">aaaa</input></li>
11                 <li><input type="checkbox" name="sports">aaaa</input></li>
12                 <li><input type="checkbox" name="sports">aaaa</input></li>
13                 <li><input type="checkbox" name="sports">aaaa</input></li>
14                 <li><input type="checkbox" name="sports">aaaa</input></li>
15 
16         </ul>
17         <script type="text/javascript">
18         var obj = document.getElementsByName('sports');
19     
20     //下面是全选
21             function quanxuan()
22             {
23                     for (var i = 0; i <= obj.length; i++) {
24                             obj[i].checked=true;        
25                     }
26             }
27 
28                 //下面是反选
29                 function fanxuan()
30             {
31                                 for (var i = 0; i <= obj.length; i++) {
32                                         if(obj[i].checked){
33                                             obj[i].checked=false;    
34                                         }else {
35                                         obj[i].checked=true;
36                                     }
37                                 }
38             }
39         //下面是全不选
40         function quanbuxuan()
41             {
42                 for (var i = 0; i <= obj.length; i++) {
43                                 obj[i].checked=false;        
44                 }
45             }
46 
47 
48 
49     </script>
50 <a href="javascript:quanxuan()" >全选</a>
51 <a href="javascript:fanxuan()" >反选</a>
52 <a href="javascript:quanbuxuan()">全不选</a>
53 </body>
54 </html>

 

posted @ 2017-04-20 11:39  刘俊涛的博客  阅读(296)  评论(0)  编辑  收藏  举报