javascript - 验证 HTML 表单中不能同名的多个复选框

Question

这个问题已经有答案了:

html select only one checkbox in a group (19 个回答)

已关闭 8 年前。

我有一个包含 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
}