Javascript 如何验证最小选中复选框？

我在HTML中有几个复选框，我想确保至少选中一个复选框。我想使用jqueryvalidator，这样我就不需要管理错误消息表示业务了。另外，我想在提交表单之前完成此操作。我想通过单击按钮来验证它。我的代码如下：

HTML:

---

但这并不奏效。如何实现此逻辑？

如果有多个复选框元素，请尝试使用------“required:true”

提交表单

HTML:

或：

---

代码中有很多错误。 我已经更改了您的代码，更改了复选框的名称，为它们添加了类以及其他内容

<form id="myForm"><div class="control-group">
    <label class="label-class">
        <input type="checkbox" class="group1"  value="1" name="testing1"></input>
    </label>
    <label class="label-class">
        <input type="checkbox" class="group1" value="1" name="testing2"></input>
    </label>
    <label class="label-class">
        <input type="checkbox" class="group1"  value="1" name="testing3"></input>
    </label>
    <button>Button</button>
</div>
</form>

---

请参见

您使用复选框与单选按钮是否有原因？您是否尝试过

$（“：checked”）。长度>0

？@Taplar：“您使用复选框与单选按钮是否有原因？”-单选按钮最多允许一个选择，但他至少需要一个，因此，我认为这可能意味着用户应该能够选择多个选项。jQuery Validate实际上适用于整个表单。因此，如果只针对一个复选框组（如Jquery的validator.element（）），您可能最好使用自定义解决方案，它可以只验证表单中的一个元素。但是我不知道是否也有类似的方法来验证一组复选框。谢谢你的建议！你是说“测试：{required:true，minlenght:1}”吗？我只是按照你的建议做了尝试，但是验证还是不起作用。嗨，这个有效。但缺点是该解决方案不能利用Jquery验证程序的功能，如将复选框标记为红色并自动提供错误消息。您认为第二个解决方案可以做到吗？第二个解决方案也不能利用Jquery验证程序。Jquery validator自动提供一些功能，例如将无效元素标记为红色，并在元素周围显示错误消息等。使用第二种解决方案，我们可以自己模拟Jquery validator的行为，但不方便。您好，谢谢！是否可以只验证复选框，而不验证整个表单？比如说我可以在“$（'button'）中创建自定义规则吗？单击（函数（e）{…}）；”？我可以想到的一种方法是动态更改规则。此URL提供了一个介绍：

$("button").click(function(e) {
    var isOk = true;
    isOk = $("myForm").validate({
        rules: {
            testing: {
                minlength: 1
            }
        },
        message: {
            testing: "please select at least one item"
        }
    });
    return isOk; 
});

<div class="control-group">
<label class="label-class">
    <input type="checkbox" data-validation-minchecked-minchecked="1" value="1" name="testing"></input>
</label>
<label class="label-class">
    <input type="checkbox" data-validation-minchecked-minchecked="1" value="1" name="testing"></input>
</label>
<label class="label-class">
    <input type="checkbox" data-validation-minchecked-minchecked="1" value="1" name="testing"></input>
</label>
</div>
<button id="button">Submit</button>

$("#button").click(function(e) {
    return ($(":checked").length > 0);
});

$("#button").click(function(e) {
    if ($(":checked").length > 0)
        // Submit your form here
    else
        // Display warning here
});

<form id="myForm"><div class="control-group">
    <label class="label-class">
        <input type="checkbox" class="group1"  value="1" name="testing1"></input>
    </label>
    <label class="label-class">
        <input type="checkbox" class="group1" value="1" name="testing2"></input>
    </label>
    <label class="label-class">
        <input type="checkbox" class="group1"  value="1" name="testing3"></input>
    </label>
    <button>Button</button>
</div>
</form>

$("#myForm").validate({
        rules: {
            testing1: {
                require_from_group: [1, ".group1"]
            },
             testing2: {
                require_from_group: [1, ".group1"]
            },
             testing3: {
                require_from_group: [1, ".group1"]
            }
        },
        message: {
            testing1: "please select at least one item",
            testing2: "please select at least one item",
            testing3: "please select at least one item",
        }
     });

$("button").click(function(e) {

return $("#myForm").valid();

 });