[英]How to validate that at least one checkbox is checked in each set of checkboxes
我有一大堆由兩個表分隔的復選框。 在兩套復選框中，我希望用戶在提交表單之前需要檢查兩套復選框中的至少一個（因此，根據我的代碼，COST下至少一個復選框，BENEFIT下一個復選框）。 我希望這是有道理的。 我的代碼如下：
<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>
您可以在每個復選框中添加一個類（如.checkbox ），然后在提交之前執行類似的操作-
if ($(".checkbox:checked").length > 0) {
//perform submit
}
else{
alert("check at least one checkbox!");
}
您也可以使用“ .is：”以提高可讀性。
if ( $( '.checkbox' ).is( ':checked' ) ) { // atleast one checked } else { // none checked }
首先，您的HTML格式不正確。 在開始新的表格元素之前，您應該關閉一個表格元素。
然后從按ID或至少按類區分表開始，例如：
<table id="cost-table" border="1" align="center">
然后檢查是否至少檢查了一個。 如果您使用的是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');
}
});
});
與其他類型相同。
如何檢查多個復選框中是否選中了至少一個復選框？
[英]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
如何從復選框數組中檢查至少一個復選框，並且復選框中的文本區域不為空白，且其值為“ 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?
如果選中其中一個復選框（每個復選框上的名稱不同），如何顯示 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
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.