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

Question

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

Answer 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。