Question

我有一大组复选框，由两个表分隔。在两组复选框中，我希望用户在提交表单之前需要检查两个集合中的至少一个复选框（因此，根据我的代码，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>

Answer 1

您可以在每个复选框中添加一个类（如.checkbox），然后在提交之前执行类似的操作 -

if ($(".checkbox:checked").length > 0) {
    //perform submit
}
else{
    alert("check at least one checkbox!");
}

Answer 2

你也可以使用“.is：更具可读性。



if ( $( '.checkbox' ).is( ':checked' ) ) {
   // atleast one checked
} else {
   // none checked
}

if ( $( '.checkbox' ).is( ':checked' ) ) { // atleast one checked } else { // none checked }

示例：https://jsfiddle.net/rr3vfymy/

Answer 3

首先，您的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');
        }
    });
});

和其他类型相同。

如何验证每组复选框中是否选中了至少一个复选框

3 个答案: