我应如何验证最少选中的复选框？

Question

我在HTML中有几个复选框，我想确保至少选中了一个。 而且我想使用jQuery验证程序，这样就不必管理错误消息演示业务。 另外，我想在提交表单之前执行此操作。 我想通过单击一个按钮来验证它。 我的代码是这样的：

HTML：

<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>

JavaScript的：

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

但这不能很好地工作。 我应如何实施此逻辑？

Answer 1

尝试使用------“ required：true”

Answer 2

如果选中的复选框元素超过1个，则提交表单。

HTML：

<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>

JQuery的：

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

要么：

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

Answer 3

您在代码中犯了许多错误。 我已经更改了您的代码，更改了复选框的名称，向其中添加了类以及其他内容。

<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>

和javascript：

$("#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();

 });

见jsFiddle