html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>复选框</title> <script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script> <script type="text/javascript" src="js/test.js" ></script> </head> <body> <form method="post" action=""> 你的爱好是: <br /> <input type="checkbox" name="checkbox1" value="看书" />看书 <input type="checkbox" name="checkbox1" value="唱歌" />唱歌 <input type="checkbox" name="checkbox1" value="跳舞" />跳舞 <input type="checkbox" name="checkbox1" value="运动" />运动 <br /> <input type="button" id="CheckedAll" value="全 选" /> <input type="button" id="CheckedNo" value="全不选" /> <input type="button" id="CheckedRev" value="反选" /> <input type="button" id="send" value="提交" /> </body> </html>
js
$(document).ready(function(){ $("#CheckedAll").click(function() { $("[name=checkbox1]:checkbox").attr("checked",true); }) $("#CheckedNo").click(function() { $("[name=checkbox1]:checkbox").attr("checked",false); }) $("#CheckedRev").click(function() { $("[name=checkbox1]:checkbox").each(function () { this.checked=!this.checked; }) }) $("#send").click(function(){ var str = "你的爱好是: "; $("[name=checkbox1]:checkbox:checked").each(function(){ str+=$(this).val()+" "; }); alert(str); }); });
效果: