<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ //全选 $("input[type=button]:eq(0)").click(function(){ $("input[name=aihao]").attr("checked",true) } ) //全不选 $("input[type=button]:eq(1)").click(function(){ $("input[name=aihao]").attr("checked",false) } ) //反选 $('#fanxuan').click(function(){ $("input[name=aihao]").each(function(){ //通过this.checked代替了true或false,都变成他们的相反状态 this.checked=!this.checked }) }) //弹出提示框 $("#tishi").click(function(){ var str="你的爱好是:" $(":checked").each(function(){ str=str+$(this).val()+","; }); alert(str) }) })
</script> </head>
<body><h3>请选择你的爱好!</h3> <input type="checkbox" name="aihao" value="运动"/>运动 <input type="checkbox" name="aihao" value="旅游"/>旅游 <input type="checkbox" name="aihao" value="上网"/>上网 <input type="checkbox" name="aihao" value="交友"/>交友 <input type="checkbox" name="aihao" value="看书"/>看书 <br/> <input type="button" value="全选" id="quanxuan"/> <input type="button" value="全不选" id="quanbuxuan"/> <input type="button" value="反选" id="fanxuan"/> <input type="button" value="提示" id="tishi"/>
</body> </html>
|