8.全选，或取消全选 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html>
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 6 <title>JS全选或取消全选</title>
 7 <script type="text/javascript">
 8 
 9     function checkOrCancleAll(){
10     
11         var chkElt=document.getElementById("chkElt");
12         var checked=chkElt.checked;
13                 
14         var allInterests=document.getElementsByName("interest");
15         var mySpan=document.getElementById("mySpan");
16 
17         if(checked){
18         
19             for(var i=0;i<allInterests.length;i++){
20             
21                 allInterests[i].checked=true;
22             
23             }
24             mySpan.innerHTML="取消";
25         
26         }else{
27         
28             for(var i=0;i<allInterests.length;i++){
29             
30                 allInterests[i].checked=false;
31             
32             }
33             mySpan.innerHTML="全选";
34         
35         }
36 
37     }
38 
39 </script>
40 </head>
41 
42 <body>
43 
44     <input type="checkbox" id="chkElt" onclick="checkOrCancleAll()"/><span id="mySpan">全选</span></br>
45     
46     运动<input type="checkbox" name="interest" value="sport"/></br>
47     旅游<input type="checkbox" name="interest" value="travel"/></br>
48     美食<input type="checkbox" name="interest" value="food"/></br>
49     睡觉<input type="checkbox" name="interest" value="sleep"/></br>
50     音乐<input type="checkbox" name="interest" value="music"/></br>
51 
52     
53     
54 </body>
55 </html>

 

posted @ 2017-11-20 17:25  xzy不会飞的地板流  阅读(256)  评论(0)    收藏  举报