Question

I have 3 checkoxes and a submit button:

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

I have the following jquery which alerts “Please tick all checkboxes!” when no checkboxes been ticked:

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

Using jQuery I need:

If all checkboxes have been ticked, once the submit button is clicked alert: “All checkboxes have been ticked”.

If all checkboxes have not been clicked then alert: “Please tick all checkboxes!” on submit.

thanks

Answer 1

You can check if the number of checkboxes are the same number as the number of checked ones:

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