Brian Cray ··· Home > Blog > Javascript > Easiest "check all" ever with jQuery

Easiest "check all" ever with jQuery

How does it work?

This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.

HTML Setup

Add checkboxes however you like, just make sure they are within the same fieldset.

<fieldset>
    <!-- these will be affected by check all -->
    <div><input type="checkbox" class="checkall"> Check all</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
    <!-- these won't be affected by check all; different field set -->
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
    <div><input type="checkbox"> Checkbox</div>
</fieldset>

The "check all" jQuery

I must say this is genius… and fast! I spent a lot of time tweaking this code for performance and brevity. Enjoy!!

$(function () {
    $('.checkall').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
    });
});