表单中的button标签会自动提交表单问题
2018-02-15 19:41
281 查看
在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>
本来是想用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- form表单里面 button标签自动提交表单的问题
- 表单中的button标签会自动提交表单问题
- form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置
- 关于form表单底下 button自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- form表单下的button按钮会自动提交表单的问题
- 一个表单里，如果有<button>标签存在，它会自动提交表单
- <button>标签灵异事件原因，异常提交，自动提交表单
- form表单底下的button按钮点击自动提交恶心问题的解决
- <button>标签也能提交表单问题
- form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置
- button按钮点击表单自动提交的问题
- 关于button按钮自动提交表单刷新页面问题
- 在html中点击<button>自动提交表单问题
- form表单下的button按钮会自动提交表单的问题
- button自动提交表单问题
- form表单下的button按钮会自动提交表单的问题