我有一个多个复选框的列表。用户可以检查所有，但至少需要。不知道如何实现这一目标
<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>
这是一个使用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>
这应该有你需要的，看看底部的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);
}
});
});
您可以在PHP级别或Javascript级别执行此操作。如果您使用Javascript和/或JQuery，则可以检查并验证是否使用选择器检查了所有复选框...
Jquery还提供了几个验证库。退房：http://jqueryvalidation.org/
使用Javascript进行验证的问题是它可能被绕过，因此检查服务器也是明智之举。
使用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();
}
?>
上面接受的解决方案的问题是，不允许表单提交上的else条件（如果选择了一个框），从而阻止表单提交 - 至少在我尝试时。
我发现另一种解决方案可以更完整地影响所需的结果恕我直言，这里：
Making sure at least one checkbox is checked
代码如下：
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!' );
}
}
Vell的代码和答案
使用此选项，您可以选中是否在不同的复选框组或多个复选框中选中或不选中一个复选框。
参考：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>