确保至少有一个复选框被勾选了多组复选框？

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。