jquery - jQuery - 在提交时验证所有复选框

Question

我有 3 个复选框和一个提交按钮：

<form id="form1" action="/controller/action" method="post">
            <div class="checkbox"><input type="checkbox" name="box1" class="cBox" /><label for="box1" class="label">Box1</label></div>
            <div class="checkbox"><input type="checkbox" name="Box2" class="cBox" /><label for="Box2" class="label">Box2</label></div>
            <div class="checkbox"><input type="checkbox" name="Box3" class="cBox" /><label for="Box3" class="label">Box3</label></div>
            <input type="submit" value="Submit" />
</form>

我有以下 jquery 警告“请勾选所有复选框！” 当没有勾选复选框时：

$(document).ready(function() {
    $('#form1').submit(function() {
        if ($('input:checkbox', this).is(':checked')) {
            // everything's fine...
        } else {
            alert('Please tick all checkboxes!');
            return false;
        }
    });
});

使用 jQuery 我需要：

如果已勾选所有复选框，则单击提交按钮后会发出警报：“所有复选框已被勾选”。

如果尚未单击所有复选框，则警告：“请勾选所有复选框！” 在提交。

谢谢

Answer 1

您可以检查复选框的数量是否与选中的数量相同：

$(document).ready(function() {
    $('#form1').submit(function() {
        if ($('input:checkbox', this).length == $('input:checked', this).length ) {
            // everything's fine...
        } else {
            alert('Please tick all checkboxes!');
            return false;
        }
    });
});