在form表单内插入一个button按钮,按钮点击后会自动提交表单,
本来是想用Jquery给button添加一个事件用来设置多选框的全选 全不选和反选的问题的,但是发现定义在form标签区域内的button点击之后没有反应,闪一下就过去了.于是给form表单的action属性赋了一个值,发现点击button按钮后表单提交了.于是将button按钮定义在form表单外部,以防止表单自动提交,还可以不用button标签,直接用input的button属性生成按钮.以下是源代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery操作全选全不选和反选</title> <!--百度在线压缩地址--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> </head> <body> <form action="reg.php"> <p>请选择喜欢的水果 : </p> <p> <input type="checkbox">西瓜 </p> <p> <input type="checkbox">香蕉 </p> <p> <input type="checkbox">苹果 </p> <p> <input type="checkbox">草莓 </p> <p> <input type="checkbox">椰子 </p> </form> <p> <button id="all">全选</button> <button id="notall">全不选</button> <button id="unall">反选</button> </p> <script> //对三个选择按钮进行赋值 // 1:全选 $("#all").click(function(){ $(":checkbox").attr({"checked":true}); }); // 2:全不选 $("#notall").click(function(){ $(":checkbox").attr({"checked":false}); }); // 3:反选 $("#unall").click(function(){ $(":checkbox").each(function(){ this.checked = !this.checked; }); }); </script> </body> </html>