js实现复选框的全选和全不选

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5         <title>无标题文档</title>
 6     </head>
 7     
 8     <body>
 9         <form>
10           请选择你爱好:<br>
11           <input type="checkbox" name="hobby" id="hobby1">  音乐
12           <input type="checkbox" name="hobby" id="hobby2">  登山
13           <input type="checkbox" name="hobby" id="hobby3">  游泳
14           <input type="checkbox" name="hobby" id="hobby4">  阅读
15           <input type="checkbox" name="hobby" id="hobby5">  打球
16           <input type="checkbox" name="hobby" id="hobby6">  跑步 <br>
17           <input type="button" value = "全选" onclick = "checkall();">
18           <input type="button" value = "全不选" onclick = "clearall();">
19           <p>请输入您要选择爱好的序号，序号为1-6:</p>
20           <input id="wb" name="wb" type="text" >
21           <input name="ok" type="button" value="确定" onclick = "checkone();">
22         </form>
23         <script type="text/javascript">
24 //全选
25         function checkall(){
26             var hobby = document.getElementsByTagName("input");
27 
28             for(var i=0;i<hobby.length;i++){
29 
30                hobby[i].checked=true;
31 
32            }
33            
34         }
35 //全不选
36         function clearall(){
37             var hobby = document.getElementsByName("hobby");
38 
39                     for(var i=0;i<hobby.length;i++){
40 
41                hobby[i].checked=false;
42 
43            }
44             
45         }
46         
47         function checkone(){
48             var j=document.getElementById("wb").value;
49         var hobby=document.getElementById(('hobby'+j));
50        hobby.checked=true;
51         
52         }
53         
54         </script>
55     </body>
56 </html>
posted on 2017-08-08 19:27 calamus 阅读(346) 评论(0) 编辑收藏举报