javascript - 如何验证每组复选框中至少选中一个复选框

标签 javascript jquery checkbox

我有一大组由两个表分隔的复选框。在这两组复选框中，我希望用户在提交表单之前至少选中两组复选框中的一个复选框(因此，根据我的代码，“成本”下至少有一个复选框，“ yield ”下至少有一个复选框)。我希望这是有道理的。我的代码如下:

<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!");
}

关于javascript - 如何验证每组复选框中至少选中一个复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30265343/

上一篇：javascript - browserify可以设置全局模块吗？

下一篇：javascript parseInt() 仅转换前两个字符

相关文章：

javascript - 访问内部 DIV id

javascript - 如何将自定义元素的文本内容分配给模板槽？

javascript - 使用 JavaScript 动态添加/删除表行

c# - 使用 Blazor 设置复选框值而不绑定(bind)

javascript - 使用 PhantomJS 和 node.js 保存和渲染网页

jquery - 手动排序表行 jQuery 插件

javascript - 在菜单栏中的页面更改时添加事件类？

javascript - 显示正在加载图像直到 div 完全加载

html - 为什么选中这些自定义复选框会将屏幕位置移到顶部？

java - 是否可以在 SWT 中将复选框顶部对齐

©2024 IT工具网  联系我们