勾选checkbox，并把勾选的值显示在某个div中
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8">
<title> 获取爱好 </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
//全选
$("input[name='quanxuan']").click(function(){
$("input[type='checkbox']").attr("checked","checked");
}); //取消
$("input[name='quxiao']").click(function(){
$("input[type='checkbox']").removeAttr("checked");
});
//查看我的爱好
$("input[type='button']").click(function(){
//获取所有checkbox
var str="";
$("input[type='checkbox']:checked").each(function(){
str +=$(this).val()+"<br/>";
$("#text").html(str); }); });
}) </script>
</head> <body>
<form id="myForm">
<h3>选择你的爱好：</h3>
<ul id="hobby">
<li><input type="checkbox" value="音乐" />音乐</li>
<li><input type="checkbox" value="登山" />登山</li>
<li><input type="checkbox" value="游泳" />游泳</li>
<li><input type="checkbox" value="阅读" />阅读</li>
<li><input type="checkbox" value="打球" />打球</li>
<li><input type="checkbox" value="跑步" />跑步</li>
<li><input type="checkbox" value="其他" />其他</li>
</ul>
<input type="button" name="quanxuan" value="全选"/>
<input type="button" name="quxiao" value="全取消"/>
<hr/> <ul>
<li><input type="button" value="查看我选择的爱好" /></li>
</ul>
<p id="text"></p> </form>
<script type="text/javascript"> </script> </body>
</html>