确保使用jQuery Validate在三个复选框中至少选中一个复选框

我在一个大表单上使用jqueryvalidate插件，并使用require_from_group方法（）来确保至少选中了三个复选框中的一个复选框

然而，我一直认为它阻止了其他规则的运行。我已经应用了一个，但它似乎也不能正常工作（正如上面的GitHub问题中提到的）

因此，我需要找到另一种方法来验证这组三个复选框字段（注意，我需要专门针对这组三个复选框字段，因为表单上还有其他不需要验证的复选框字段），但我不确定现在从何处开始。我想我需要在我的jQuery验证代码中添加一些自定义规则，但我不确定现在从哪里开始，所以希望您能提供一些建议，谢谢

以下是我的起始HTML（对于这个问题，剥离为基本内容）：

编辑1:对不起，我应该添加每个复选框的名称属性不能相同。这些名称映射到CMS中的特定自定义字段名称，因此如果它们都相同，则提交表单时字段中的值将无法正确保存。这也是为什么我从来没有遵循上的第二个示例的原因。

试试看

HTML

您不必使用不同的

名称数组属性

，它可以像

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

从

在

简单Jquery中

var isChecked=false;
$('input.my_checkbox_group').each(function(){
   if($(this).is(':checked'))
   {
       isChecked=true;
   }
});
if(isChecked==false)
{
   alert("Please select a group");
}

试一试

HTML

您不必使用不同的

名称数组属性

，它可以像

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

从

在

简单Jquery中

var isChecked=false;
$('input.my_checkbox_group').each(function(){
   if($(this).is(':checked'))
   {
       isChecked=true;
   }
});
if(isChecked==false)
{
   alert("Please select a group");
}

---

我认为您需要为此更改名称属性。需要为每个复选框设置相同的名称

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

---

我认为您需要为此更改名称属性。需要为每个复选框设置相同的名称

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

检查以确保至少勾选了三个复选框中的一个

它可以在不修改任何

名称

或

id

属性或向HTML添加任何新内容的情况下完成任务。（但是，您有一些无效的HTML，我已经清理了一些。）

工作演示：

我还使用了

groups

选项将三条消息合并为一条。（如果需要三条消息，只需将其删除即可。）

完整的jQuery：

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});

检查以确保至少勾选了三个复选框中的一个

它可以在不修改任何

名称

或

id

属性或向HTML添加任何新内容的情况下完成任务。（但是，您有一些无效的HTML，我已经清理了一些。）

工作演示：

我还使用了

groups

选项将三条消息合并为一条。（如果需要三条消息，只需将其删除即可。）

完整的jQuery：

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});

---

---

这可能是感谢罗汉回答的翻版。名称属性必须不同，因为它们是CMS中的单个字段名称-如果它们都具有相同的名称，则提交表单时该字段将不会保存到正确的自定义字段。因此，我只能通过类或ID区分每个复选框。您可以通过

类名

调用它，如

规则：{my_checkbox_group:{required:true，minlength:1}，

请参考，感谢您对这一点的澄清-我的JS/jQuery不是很好，正如您所知：：-）它可能与感谢Rohan的回答重复。名称属性必须不同，因为它们是CMS中的单个字段名称-如果它们都有相同的名称，那么该字段将不会保存到正确的客户提交表单时的m字段。因此，我只能通过类或ID区分每个复选框。您可以通过

类名

调用它，如

规则：{my_checkbox_group:{required:true，minlength:1}，

请参考，感谢您对这一点的澄清-我的JS/jQuery不是很好，正如您所知。：-）感谢您的回答，Devang。不幸的是，名称属性必须不同，因为它们是CMS中的单个字段名称-如果它们都有相同的名称，那么该字段将不会保存到CMS中正确的自定义字段中提交表单时，CMS。因此，我只能通过类或ID区分每个复选框字段。感谢您的回答，Devang。不幸的是，名称属性必须不同，因为它们是CMS中的单个字段名称-如果它们都具有相同的名称，则在提交表单时，该字段将不会保存到CMS中正确的自定义字段m已提交。因此，我只能通过类或ID来区分每个复选框字段。非常感谢您，Sparky！：）我刚刚将其用于实际表单，效果非常好。我还使用它为不同的复选框组添加了一个新的自定义方法，因此这是一个很好的、可重复/灵活的解决方案。@Stephen you could使用返回$（我的复选框组：已选中）将其修剪.长度>0@politus-谢谢，我会看一看。@Sparky获取信息-我将你的答案应用于一组文本字段，并提出了一个错误类未被删除的问题。我在下面的链接中发布并得到了答案，但我只是回到你的手中，注意到复选框中也发生了同样的事情，只是它没有被删除这不是很明显，因为没有错误的样式。所以只是出于兴趣让你知道。谢谢。：）这是链接：@Stephen，我必须看一下。通常，添加和删除类是由插件自动处理的。使用自定义方法时可能会有错误。非常感谢你，Sparky！：）我刚刚收到这与我的实际表单一起使用，效果非常好。我还使用它为不同的复选框组添加了一个新的自定义方法，因此这是一个很好的可重复的/f

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});