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

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

您可以通过定义一个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>

A组
1.
2.
B组
1.
2.
C组
1.
2.

以及以下处理实际逻辑的jQuery：

$（函数（）{
$（'form'）。提交（函数（e）{
//存储已处理的每个组
var checkedGroups=[]；
//检查各组
$（'：复选框[class^=“group-”]）。每个（函数（）{
//存储对当前类的引用
var currentGroup=$（this.attr（'class'）；
//如果当前组未被选中，请选中它
if（$.inArray（currentGroup，checkedGroups）=-1）{
var atLeastOneChecked=$（'：复选框'+currentGroup+'：选中'）。长度>0；
//如果至少有一个未选中，请提醒用户
如果（！AtlastoneChecked）{
//提醒用户并停止一切继续进行
警报（“请确保选中“+$（this.data（'name'）+”中的至少一个选项”）；
e、 预防默认值（）；
返回false；
}
//如果我们已经做到了这一点，那么这个组已经被检查过了
checkedGroups.push（当前组）；
}      
});
});
});

您不必使用CSS类来处理选择。您可以很容易地使用

data-*

属性来处理这个问题，所以这取决于您的个人喜好

---

您可以。

您可以通过定义一个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>

A组
1.
2.
B组
1.
2.
C组
1.
2.

以及以下处理实际逻辑的jQuery：

$（函数（）{
$（'form'）。提交（函数（e）{
//存储已处理的每个组
var checkedGroups=[]；
//检查各组
$（'：复选框[class^=“group-”]）。每个（函数（）{
//存储对当前类的引用
var currentGroup=$（this.attr（'class'）；
//如果当前组未被选中，请选中它
if（$.inArray（currentGroup，checkedGroups）=-1）{
var atLeastOneChecked=$（'：复选框'+currentGroup+'：选中'）。长度>0；
//如果至少有一个未选中，请提醒用户
如果（！AtlastoneChecked）{
//提醒用户并停止一切继续进行
警报（“请确保选中“+$（this.data（'name'）+”中的至少一个选项”）；
e、 预防默认值（）；
返回false；
}
//如果我们已经做到了这一点，那么这个组已经被检查过了
checkedGroups.push（当前组）；
}      
});
});
});

您不必使用CSS类来处理选择。您可以很容易地使用

data-*

属性来处理这个问题，所以这取决于您的个人喜好

---

您可以。

将同一组中的所有复选框指定为同一类。然后可以使用

$（“：checkbox.groupClass:checked”）.length

获取该组中的复选框数。循环所有类，如果其中任何一个

0

则验证失败。将同一组中的所有复选框指定为同一类。然后可以使用

$（“：checkbox.groupClass:checked”）.length

获取该组中的复选框数。循环遍历所有类，如果其中任何一个

0

则验证失败。这就像一个符咒！是否有任何方法可以在不使用“数据名”属性的情况下指定警报？我唯一的选择是将标记直接放入Wordpress文本编辑器，出于某种原因，该编辑器正在剥离该属性。如果你想知道，我（或任何人）都不可能为这个网站添加插件或编辑Wordpress文件。不过，我只是用jquery为每个输入添加了属性。谢谢！你是一个救生员，这就像一个符咒！是否有任何方法可以在不使用“数据名”属性的情况下指定警报？我唯一的选择是将标记直接放入Wordpress文本编辑器，出于某种原因，该编辑器正在剥离该属性。如果你想知道，我（或任何人）都不可能为这个网站添加插件或编辑Wordpress文件。不过，我只是用jquery为每个输入添加了属性。谢谢！你是个救生员