jquery获取复选框的值

勾选checkbox，并把勾选的值显示在某个div中

 1 <!DOCTYPE html  >
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>  获取爱好 </title>
 6     <meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
 7     <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
 8     <script type="text/javascript" >
 9         $(document).ready(function(){
10             //全选
11             $("input[name='quanxuan']").click(function(){
12                 $("input[type='checkbox']").attr("checked","checked");
13             });
14 
15             //取消
16             $("input[name='quxiao']").click(function(){
17                 $("input[type='checkbox']").removeAttr("checked");
18             });
19             //查看我的爱好
20             $("input[type='button']").click(function(){
21                 //获取所有checkbox
22                 var str="";
23                 $("input[type='checkbox']:checked").each(function(){
24                     str +=$(this).val()+"<br/>";
25                     $("#text").html(str);
26 
27                 });
28 
29 
30             });
31         })
32 
33     </script>
34 </head>
35 
36 <body>
37 <form id="myForm">
38     <h3>选择你的爱好：</h3>
39     <ul id="hobby">
40         <li><input type="checkbox" value="音乐" />音乐</li>
41         <li><input type="checkbox" value="登山" />登山</li>
42         <li><input type="checkbox" value="游泳" />游泳</li>
43         <li><input type="checkbox" value="阅读" />阅读</li>
44         <li><input type="checkbox" value="打球" />打球</li>
45         <li><input type="checkbox" value="跑步" />跑步</li>
46         <li><input type="checkbox" value="其他" />其他</li>
47     </ul>
48     <input type="button" name="quanxuan" value="全选"/>
49     <input type="button" name="quxiao" value="全取消"/>
50     <hr/>
51 
52     <ul>
53         <li><input type="button" value="查看我选择的爱好" /></li>
54     </ul>
55     <p id="text"></p>
56 
57 </form>
58 <script type="text/javascript">
59     
60 
61 </script>
62 
63 </body>
64 </html>

 

posted @ 2016-09-25 17:07  sincoolvip  阅读(843)  评论(0)  编辑  收藏  举报