验证 HTML 表单中不能同名的多个复选框[重复]

Question

我有一个包含 2 组不同复选框的表单，它们都需要具有不同的名称。我需要的验证类型是用户必须从第 1 组中选择至少一个选项，从第 2 组中选择至少一个选项，然后表单才允许他们提交。我确信在 JQuery 或 JavaScript 中有一些方法可以做到这一点，但我在这两种方面都几乎没有经验，而且我在网上找到的大部分内容都要求 name 属性与我不能拥有的相同。

<form id="form1" action method="post">

  //Group 1 needs to have at least one option selected

  <input class="check1" type="checkbox" id="Dan_Murphys" name="Dan_Murphys"/>
  <input class="check1" type="checkbox" id="BWS" name="BWS" />
  <input class="check1" type="checkbox" id="First_Choice" name="First_Choice"/>

  //Group 2 needs to have at least one option selected

  <input class="check2" type="checkbox" id="Apple" name="Apple"/>
  <input class="check2" type="checkbox" id="Bread" name="Bread" />
  <input class="check2" type="checkbox" id="Water" name="Water"/>

  <input type="submit" name="SUBMIT" value="Submit">

</form>

Answer 1

可以使用类名来定位组。您可以使用类选择器检查检查元素的长度：

if($('.check1:checked').length && $('.check2:checked').length){
    // at least one is selected in both group
}