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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值