勾选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>