javascript 在表单提交时检查至少一个复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18378250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
check atleast one checkbox is checked on form submission
提问by Shiva Krishna Bavandla
I have a form that consists of checkbox fields, now on form submission we should check whether atleast one checkbox is checked
我有一个由复选框字段组成的表单，现在在提交表单时，我们应该检查是否至少选中了一个复选框
html code
html代码
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onsubmit="atleast_onecheckbox()"/>
</form>
javascript code
javascript代码
<script type="text/javascript">
function atleast_onecheckbox()
{
var value = $("[name=invite]:checked").length > 0);
alert(value) ;
if (!value)
{
alert("Please.....");
}
}
</script>
So when i clicked on the submit button, the form is redirecting to the url mentioned in the action, but its not even hitting the javascript function atleast_onecheckbox()
所以当我点击提交按钮时，表单正在重定向到 中提到的 url action，但它甚至没有点击 javascript 函数atleast_onecheckbox()
what wrong in the above code, can anyone please make the above code work ?
上面的代码有什么问题，有人可以让上面的代码工作吗？
回答by dievardump
You shouldn't attach JavaScript event directly in the HTML, this is a really bad practice. Instead, because you use jQuery, you should use jQuery event handler :
你不应该直接在 HTML 中附加 JavaScript 事件，这是一个非常糟糕的做法。相反，因为您使用 jQuery，您应该使用 jQuery 事件处理程序：
$('#form_check').on('submit', function (e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
});
(http://jsbin.com/IXeK/1/edit)
( http://jsbin.com/IXeK/1/edit)
If you really want to use HTML onsubmit, even if it's bad (and you should feel bad just by thinking of it), the onsubmit should be:
如果你真的想使用 HTML onsubmit，即使它很糟糕（你应该会因为想到它而感到难过），onsubmit 应该是：
- attached to the form
- should prevent the default event on submit
- return false
- 附在表格上
- 应该防止提交时的默认事件
- 返回假
So it covers everything. Like here http://jsbin.com/IXeK/2/edit
所以它涵盖了一切。喜欢这里http://jsbin.com/IXeK/2/edit
<form onsubmit="return atleast_onecheckbox(event)" id="form_check" class="form" action="/path/to/some/url" method="POST">
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" value="">
</div>
<input type="submit" class="btn btn-primary" value="Submit" />
function atleast_onecheckbox(e) {
if ($("input[type=checkbox]:checked").length === 0) {
e.preventDefault();
alert('no way you submit it without checking a box');
return false;
}
}
回答by shemy
<script type="text/javascript">
function atleast_onecheckbox()
{
if (document.getElementById('invite').checked) {
alert('the checkbox is checked');
}
else
{
alert("please check atleast one..");
return false;
}
}
</script>
<form id="form_check" class="form" action="/path/to/some/url" method="POST">
{% for field in fields %}
<div class="check_fields">
<input class="select-unselect" type="checkbox" name="invite" id="invite" value="">
{{field}}
</div>
{% endfor %}
<input type="submit" class="btn btn-primary" value="Submit" onclick=" return atleast_onecheckbox()"/>
</form>
