Html 在提交表单之前，如何要求至少选中一个复选框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22238368/
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
How can I require at least one checkbox be checked before a form can be submitted?
提问by Jeff Morrris
I have a list of multiple check boxes. The user can check all of them, but at least one should be checked to allow form submission. How can I enforce that requirement?
我有一个包含多个复选框的列表。用户可以检查所有这些，但至少应该检查一个以允许表单提交。我如何执行该要求？
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
回答by Jason R
Here's an example using jquery and your html.
这是一个使用 jquery 和您的 html 的示例。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
alert("You must check at least one checkbox.");
return false;
}
});
});
</script>
<p>Box Set 1</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 1" required><label>Box 1</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 2" required><label>Box 2</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 3" required><label>Box 3</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 4" required><label>Box 4</label></li>
</ul>
<p>Box Set 2</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 5" required><label>Box 5</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 6" required><label>Box 6</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 7" required><label>Box 7</label></li>
<li><input name="BoxSelect[]" type="checkbox" value="Box 8" required><label>Box 8</label></li>
</ul>
<p>Box Set 3</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 9" required><label>Box 9</label></li>
</ul>
<p>Box Set 4</p>
<ul>
<li><input name="BoxSelect[]" type="checkbox" value="Box 10" required><label>Box 10</label></li>
</ul>
<input type="button" value="Test Required" id="checkBtn">
</body>
</html>
回答by stackPusher
This should have what you need, check out the jsfiddle at the bottom:
这应该有你所需要的，查看底部的 jsfiddle：
$(document).ready(function () {
$('#txt').val($("input[type=checkbox]:checked").length);
$('#txt2').val($("input[type=checkbox]").length);
$('input[type=checkbox]').change(function () {
checked = $("input[type=checkbox]:checked").length;
$('#block').show();
$('#block2').hide();
if (checked > 0) {
$('#block').hide();
$('#block2').show();
$('#txt').val(checked);
}
});
});
回答by Harshita Sethi
Make all the checkboxes requiredand add a change listener. If any one checkbox is ticked, remove requiredattribute from all the checkboxes. Below is a sample code.
勾选所有复选框required并添加一个change listener. 如果勾选了任何一个复选框，required则从所有复选框中删除属性。下面是一个示例代码。
<div class="form-group browsers">
<label class="control-label col-md-4" for="optiontext">Select an option</label>
<div class="col-md-6">
<input type="checkbox" name="browser" value="Chrome" required/> Google Chrome<br>
<input type="checkbox" name="browser" value="IE" required/> Internet Explorer<br>
<input type="checkbox" name="browser" value="Mozilla" required/> Mozilla Firefox<br>
<input type="checkbox" name="browser" value="Edge" required/> Microsoft Edge
</div>
</div>
Change listener :
更改侦听器：
$(function(){
var requiredCheckboxes = $('.browsers :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
回答by Dynelight
You can either do this on a PHP level or on a Javascript level. If you use Javascript, and/or JQuery, you can check and validate if all the checkboxes are checked with a selector...
您可以在 PHP 级别或 Javascript 级别执行此操作。如果您使用 Javascript 和/或 JQuery，您可以检查和验证是否使用选择器检查了所有复选框...
Jquery also offers several validation libraries. Check out: http://jqueryvalidation.org/
Jquery 还提供了几个验证库。查看：http: //jqueryvalidation.org/
The problem with using Javascript to validate is that it may be bypassed so it is wise to check on the server too.
使用 Javascript 进行验证的问题在于它可能会被绕过，因此检查服务器也是明智之举。
Example using PHP and assuming you are calling a PO
使用 PHP 并假设您正在调用 PO 的示例
<?php
if( $_GET["BoxSelect"] )
{
//Process your form here
// Save to database, send email, redirect...
} else {
// Return an error and do not anything
echo "Checkbox is missing";
exit();
}
?>
回答by collyg
The issue with the accepted solution above is that is does not allow for the else condition on form submit (if a box has been selected), thereby preventing form submission - at least when I tried it.
上面接受的解决方案的问题是不允许表单提交的 else 条件（如果已选择一个框），从而阻止表单提交 - 至少在我尝试时是这样。
I discovered another solution that effects the desired result more completely IMHO, here:
我发现了另一种更完全地影响所需结果的解决方案恕我直言，在这里：
Making sure at least one checkbox is checked
Code as follows:
代码如下：
function valthis() {
var checkBoxes = document.getElementsByClassName( 'myCheckBox' );
var isChecked = false;
for (var i = 0; i < checkBoxes.length; i++) {
if ( checkBoxes[i].checked ) {
isChecked = true;
};
};
if ( isChecked ) {
alert( 'At least one checkbox checked!' );
} else {
alert( 'Please, check at least one checkbox!' );
}
}
That code & answer by Vell
Vell 的代码和答案
回答by Parth Patel
Using this you can check at least one checkbox is selected or not in different checkbox groups or multiple checkboxes.
使用它您可以检查至少一个复选框是否在不同的复选框组或多个复选框中被选中。
Reference : Link
参考：链接
<label class="control-label col-sm-4">Check Box 1</label>
<input type="checkbox" name="checkbox1" id="checkbox1" value=Male /> Male<br />
<input type="checkbox" name="checkbox1" id="checkbox1" value=Female /> Female<br />
<label class="control-label col-sm-4">Check Box 2</label>
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck1 /> ck1<br />
<input type="checkbox" name="checkbox2" id="checkbox2" value=ck2 /> ck2<br />
<label class="control-label col-sm-4">Check Box 3</label>
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck3 /> ck3<br />
<input type="checkbox" name="checkbox3" id="checkbox3" value=ck4 /> ck4<br />
<script>
function checkFormData() {
if (!$('input[name=checkbox1]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 1 can not be null";
return false;
}
if (!$('input[name=checkbox2]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 2 can not be null";
return false;
}
if (!$('input[name=checkbox3]:checked').length > 0) {
document.getElementById("errMessage").innerHTML = "Check Box 3 can not be null";
return false;
}
alert("Success");
return true;
}
</script>
