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。

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

1 个答案: