如何验证在每组复选框中至少选中了一个复选框
[英]How to validate that at least one checkbox is checked in each set of checkboxes
问题描述
I have a large group of checkboxes that are separated by two tables. 
我有一大堆由两个表分隔的复选框。 Out of the two sets of checkboxes, I want the user to be required to check at least one checkbox in both sets before submitting a form (so, based on my code, at least one checkbox under COST and one under BENEFIT). 在两套复选框中，我希望用户在提交表单之前需要检查两套复选框中的至少一个（因此，根据我的代码，COST下至少一个复选框，BENEFIT下一个复选框）。 I hope this makes sense. 我希望这是有道理的。 My code is below: 我的代码如下：
<body>
<h2 align="center">Cost/Benefit Matrix</h2>
<script type="text/javascript" src="http://localhost/mytesting/jquery-2.1.4.js"></script>
<style type="text/css">
p
{
font-family: "Arial";
align: center;
}
h2
{
font-family: "Arial";
}
</style>
<p>
<table border="1" align="center">
<tbody>
<tr>
<th><b>COST</b></th>
<th colspan="3">Reduced Cost</th>
<th>Neutral</th>
<th colspan="3">Increased Cost</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Capital cost</td>
<td><input type="checkbox" id="matrix1" value="1"></td>
<td><input type="checkbox" id="matrix2" value="1"></td>
<td><input type="checkbox" id="matrix3" value="1"></td>
<td><input type="checkbox" id="matrix4" value="1"></td>
<td><input type="checkbox" id="matrix5" value="1"></td>
<td><input type="checkbox" id="matrix6" value="1"></td>
<td><input type="checkbox" id="matrix7" value="1"></td>
<td><input type="checkbox" id="matrix8" value="1"></td>
</tr>
<tr>
<td>Clinical operating cost</td>
<td><input type="checkbox" id="matrix9" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix10" value="1"></td>
<td><input type="checkbox" id="matrix11" value="1"></td>
<td><input type="checkbox" id="matrix12" value="1"></td>
<td><input type="checkbox" id="matrix13" value="1"></td>
<td><input type="checkbox" id="matrix14" value="1"></td>
<td><input type="checkbox" id="matrix15" value="1"></td>
<td><input type="checkbox" id="matrix16" value="1"></td>
</tr>
<tr>
<td>Facility operating cost</td>
<td><input type="checkbox" id="matrix17" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix18" value="1"></td>
<td><input type="checkbox" id="matrix19" value="1"></td>
<td><input type="checkbox" id="matrix20" value="1"></td>
<td><input type="checkbox" id="matrix21" value="1"></td>
<td><input type="checkbox" id="matrix22" value="1"></td>
<td><input type="checkbox" id="matrix23" value="1"></td>
<td><input type="checkbox" id="matrix24" value="1"></td>
</tr>
<tr>
<td>Energy cost</td>
<td><input type="checkbox" id="matrix25" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix26" value="1"></td>
<td><input type="checkbox" id="matrix27" value="1"></td>
<td><input type="checkbox" id="matrix28" value="1"></td>
<td><input type="checkbox" id="matrix29" value="1"></td>
<td><input type="checkbox" id="matrix30" value="1"></td>
<td><input type="checkbox" id="matrix31" value="1"></td>
<td><input type="checkbox" id="matrix32" value="1"></td>
</tr>
<br>
<br>
<table border="1" align="center">
<tbody>
<tr>
<th><b>BENEFIT</b></th>
<th colspan="3">Negative Impact</th>
<th>Neutral</th>
<th colspan="3">Positive Impact</th>
<th>Don't Know</th>
</tr>
<tr>
<th></th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>No effect</th>
<th>Low</th>
<th>Medium</th>
<th>High</th>
<th></th>
</tr>
<tr>
<td>Patient/staff safety</td>
<td><input type="checkbox" id="matrix33" value="1"></td>
<td><input type="checkbox" id="matrix34" value="1"></td>
<td><input type="checkbox" id="matrix35" value="1"></td>
<td><input type="checkbox" id="matrix36" value="1"></td>
<td><input type="checkbox" id="matrix37" value="1"></td>
<td><input type="checkbox" id="matrix38" value="1"></td>
<td><input type="checkbox" id="matrix39" value="1"></td>
<td><input type="checkbox" id="matrix40" value="1"></td>
</tr>
<tr>
<td>Fire/life safety</td>
<td><input type="checkbox" id="matrix41" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix42" value="1"></td>
<td><input type="checkbox" id="matrix43" value="1"></td>
<td><input type="checkbox" id="matrix44" value="1"></td>
<td><input type="checkbox" id="matrix45" value="1"></td>
<td><input type="checkbox" id="matrix46" value="1"></td>
<td><input type="checkbox" id="matrix47" value="1"></td>
<td><input type="checkbox" id="matrix48" value="1"></td>
</tr>
<tr>
<td>Clinical quality of care</td>
<td><input type="checkbox" id="matrix49" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix50" value="1"></td>
<td><input type="checkbox" id="matrix51" value="1"></td>
<td><input type="checkbox" id="matrix52" value="1"></td>
<td><input type="checkbox" id="matrix53" value="1"></td>
<td><input type="checkbox" id="matrix54" value="1"></td>
<td><input type="checkbox" id="matrix55" value="1"></td>
<td><input type="checkbox" id="matrix56" value="1"></td>
</tr>
<tr>
<td>Patient/resident experience</td>
<td><input type="checkbox" id="matrix57" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix58" value="1"></td>
<td><input type="checkbox" id="matrix59" value="1"></td>
<td><input type="checkbox" id="matrix60" value="1"></td>
<td><input type="checkbox" id="matrix61" value="1"></td>
<td><input type="checkbox" id="matrix62" value="1"></td>
<td><input type="checkbox" id="matrix63" value="1"></td>
<td><input type="checkbox" id="matrix64" value="1"></td>
</tr>
<tr>
<td>Operational efficiency</td>
<td><input type="checkbox" id="matrix65" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix66" value="1"></td>
<td><input type="checkbox" id="matrix67" value="1"></td>
<td><input type="checkbox" id="matrix68" value="1"></td>
<td><input type="checkbox" id="matrix69" value="1"></td>
<td><input type="checkbox" id="matrix70" value="1"></td>
<td><input type="checkbox" id="matrix71" value="1"></td>
<td><input type="checkbox" id="matrix72" value="1"></td>
</tr>
<tr>
<td>Sustainability</td>
<td><input type="checkbox" id="matrix73" value="1" style="vertical-align: middle"></td>
<td><input type="checkbox" id="matrix74" value="1"></td>
<td><input type="checkbox" id="matrix75" value="1"></td>
<td><input type="checkbox" id="matrix76" value="1"></td>
<td><input type="checkbox" id="matrix77" value="1"></td>
<td><input type="checkbox" id="matrix78" value="1"></td>
<td><input type="checkbox" id="matrix79" value="1"></td>
<td><input type="checkbox" id="matrix80" value="1"></td>
</tr>
<script type="text/javascript">
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input').not(this).prop('checked', false);
// uncheck checkboxes in the same column
$('div').find('input[type="checkbox"]:eq(' + $(this).index() + ')').not(this).prop('checked', false);
});
</script>
</tbody>
</tbody>
</p>
3 个解决方案
解决方案1
2 已采纳 2015-05-15 17:34:05
You could add a class (like .checkbox ) to each of your checkboxes and then perform something like this before submit - 您可以在每个复选框中添加一个类（如.checkbox ），然后在提交之前执行类似的操作-
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}
解决方案2
0 2015-05-15 17:52:35
You could also use ".is: for more readability. 您也可以使用“ .is：”以提高可读性。
if ( $( '.checkbox' ).is( ':checked' ) ) { // atleast one checked } else { // none checked }
Example: https://jsfiddle.net/rr3vfymy/ 示例： https ： //jsfiddle.net/rr3vfymy/
解决方案3
0 2015-05-15 17:59:17
First of all, your HTML isn't well-formed. 首先，您的HTML格式不正确。 You should close one table element before starting a new one. 在开始新的表格元素之前，您应该关闭一个表格元素。
Then start by distinguishing your tables by id, or at least by class, for example: 然后从按ID或至少按类区分表开始，例如：
<table id="cost-table" border="1" align="center">
and then check, if at least one is checked. 然后检查是否至少检查了一个。 If you are using jQuery, you can use something like: 如果您使用的是jQuery，则可以使用以下方法：
$( document ).ready( function() {
// you should use id on form too, this will bug if you have more forms on your page
$( "form" ).submit( function( event ) {
if( $( "#cost-table input[type=checkbox]:checked" ).length === 0 ) {
event.preventDefault();
//alert user here
alert('You need to select at least one cost type');
}
});
});
and the same for other types. 与其他类型相同。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何检查多个复选框中是否选中了至少一个复选框？ - How to check that at least one checkbox is checked in multiple checkboxes?
如何验证angularjs中3个复选框中是否至少选择了一个复选框 - How to validate if there is at least one checkbox selected out of 3 checkboxes in angularjs
如何使用JQuery选中至少一个Checkbox？ - How to validate at least one Checkbox is checked using JQuery?
如何从复选框数组中检查至少一个复选框，并且复选框中的文本区域不为空白，且其值为“ other”？ - How to check at least one checkbox is checked from the array of checkboxes and the text area is not blank on checkbox with value “other” is checked?
选中至少一个复选框，选中jquery验证 - check at least one checkbox checked jquery Validate
如何检查每组复选框至少选中一个 - How to check each group of checkbox is checked at least one
如果选中其中一个复选框（每个复选框上的名称不同），如何显示 div？ - How to show div, if one of the checkboxes is checked (with a different name on each checkbox)?
在选中至少三个输入复选框（每组六个中的一个）之前，如何隐藏按钮？ - How can I hide a button until at least three input checkboxes (one from each separate set of six) are checked?
如何检查用户是否已使用jQuery / Javascript选中了一组复选框中的至少一个复选框？ - How to check whether user has checked at least one checkbox from a group of checkboxes using jQuery/Javascript?
如何检查复选框列表中是否至少选中了一个复选框，其名称属性为数组 - How to check if at least one checkbox is checked from list of checkboxes with it name attribute as array
相关标签