确保为多组复选框选中至少一个复选框？

Posted 2023-05-09

【中文标题】确保为多组复选框选中至少一个复选框？

【英文标题】：Make sure at least 1 checkbox is checked for multiple groups of checkboxes?

【发布时间】：2016-07-29 03:06:48

【问题描述】：

我有几组复选框（每组都有几个复选框），我需要使用 jQuery（或普通的旧 javascript）来确保表单无法提交，除非每组复选框中至少有一个复选框被选中.我怎样才能做到这一点？如果 A 组没有至少一个，我想抛出一个错误，指定“请从 A 组中选择至少一个”等。谢谢！

【问题讨论】：

将同一组中的所有复选框赋予同一类。然后您可以使用$(":checkbox.groupClass:checked").length 来获取该组中选中的复选框的数量。循环遍历所有类，如果其中任何一个是0，则验证失败。

【参考方案1】：

您可以通过定义一个 CSS 类来处理此问题，以“分组”您的每组复选框元素，然后处理每个组以查看是否至少检查了一个元素并相应地提醒用户。

一些示例标记可能如下所示：

<form>
    <pre>Group A</pre>
    <input class='group-a' data-name='Group A' type='checkbox' value='1' /> 1
    <input class='group-a' data-name='Group A' type='checkbox' value='2' /> 2
    <pre>Group B</pre>
    <input class='group-b' data-name='Group B' type='checkbox' value='1' /> 1
    <input class='group-b' data-name='Group B' type='checkbox' value='2' /> 2
    <pre>Group C</pre>
    <input class='group-c' data-name='Group C' type='checkbox' value='1' /> 1
    <input class='group-c' data-name='Group C' type='checkbox' value='2' /> 2
    <hr />
    <input type='submit' />
  </form>

以及以下将处理您的实际逻辑的 jQuery：

<script>
    $(function()
        $('form').submit(function(e)
           // Store each group that has been processed
            var checkedGroups = [];
            // Check each group 
            $(':checkbox[class^="group-"]').each(function()
                // Store a reference to the current class
                var currentGroup = $(this).attr('class');
                // If the current group hasn't been checked, check it
                if($.inArray(currentGroup,checkedGroups) == -1)
                    var atLeastOneChecked = $(':checkbox.' + currentGroup + ':checked').length > 0;
                    // If at least one isn't checked, alert the user
                    if(!atLeastOneChecked)
                        // Alert the user and stop everything going forward
                        alert("Please ensure that at least one option from " + $(this).data('name') + " is checked.");
                        e.preventDefault();
                        return false;
                    
                    // If we have made it this far, then this group has been checked
                    checkedGroups.push(currentGroup);
                      
            );
        );
    );
  </script>

您不一定必须使用 CSS 类来处理选择。您也可以轻松地使用 data-* 属性来处理它，所以这取决于您的个人喜好。

你可以see an example of this code in action here。

【讨论】：

这就像一个魅力！有没有办法在没有 data-name 属性的情况下指定警报？我唯一的选择是将标记直接放入 Wordpress 文本编辑器中，由于某种原因，它会删除该属性。如果您想知道，我（或任何人）不可能为此网站添加插件或编辑 Wordpress 文件。

没关系，我只是用 jquery 将属性添加到每个输入中。

谢谢！你是一个救生员