Posted by & filed under Javascript, Programming, Web Development.

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>

And the jQuery to go along with it:

$(function () {
    $('.checkall').click(function () {
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

Source: briancray.com/posts/check-all-jquery-jav…

Leave a Reply

You must be logged in to post a comment.