jQuery Checkboxes: Select All, Select None, and Invert Selection

Written by Cory S.N. LaViska on December 9th, 2007

Learn how to add helpful checkbox behaviors with a few lines of jQuery.

We start off with a bunch of checkboxes:

<fieldset id="group_1">

    <input type="checkbox" name="numbers[]" value="0" />

    <input type="checkbox" name="numbers[]" value="1" />

    <input type="checkbox" name="numbers[]" value="2" />

    <input type="checkbox" name="numbers[]" value="3" />

    <input type="checkbox" name="numbers[]" value="4" />

    <input type="checkbox" name="numbers[]" value="5" />

    <input type="checkbox" name="numbers[]" value="6" />

    <input type="checkbox" name="numbers[]" value="7" />

    <input type="checkbox" name="numbers[]" value="8" />

    <input type="checkbox" name="numbers[]" value="9" />

</fieldset>

Now, we add some links:

<a rel="group_1" href="#select_all">Select All</a>

<a rel="group_1" href="#select_none">Select None</a>

<a rel="group_1" href="#invert_selection">Invert Selection</a>

The rel attribute is equal to the ID of the containing element of the checkbox group. In this example the containing element is a fieldset, but it could be a DIV, P, UL, etc.

Now, we add behaviors using jQuery:

<script type="text/javascript">

    $(document).ready( function() {

        // Select all

        $("A[href='#select_all']").click( function() {

            $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);

            return false;

        });

        // Select none

        $("A[href='#select_none']").click( function() {

            $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);

            return false;

        });

        // Invert selection

        $("A[href='#invert_selection']").click( function() {

            $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").each( function() {

                $(this).attr('checked', !$(this).attr('checked'));

            });

            return false;

        }); 

    });

</script>

To add the same functionality to another group of checkboxes, create more links and adjust the rel attribute accordingly:

<a rel="group_2" href="#select_all">Select All</a>

<a rel="group_2" href="#select_none">Select None</a>

<a rel="group_2" href="#invert_selection">Invert Selection</a>

<a rel="group_3" href="#select_all">Select All</a>

<a rel="group_3" href="#select_none">Select None</a>

<a rel="group_3" href="#invert_selection">Invert Selection</a>

...

Comments

Hi

This is a useful application. Thanks. Do you have a method in which the "select all" text could simply change to "select none" and therefore only have one link essentially? I've tried to make this happen with a similar version Kawika posted on his site but to avail.

Could you suggest a method for text swapping that works? I think many people would like this.

Regards /Mark

#1 mark on Jan 16th, 2008

Nice !

#2 Thomas on Apr 21st, 2008

I think that much easier is to use something like this:

$(":checkbox[name='boxes[]']:checked")

#3 Snowcore on Jun 2nd, 2008

Hi,
thanks, nice hint, but the problem is, that the checkboxes 'onchange' action isn't called when you use this form. Do you know how to change that?

Thanks, Michael

#4 Michael on Jun 28th, 2008

@Michael: If you're using IE the change event won't fire until the control loses focus, not when it is checked like other browsers. After you click the checkbox, hit the tab key and watch the event fire. To get around this, I usually use an onclick and test for the value of the control.

#5 Cory S.N. LaViska on Jun 29th, 2008

@Cory S.N. LaViska: I tried it with Safari on Mac OS X Leopard. If I check the box itself, the onchange event fires, but if I click on the link that changes the checkbox's state the state changes and the onchange event is NOT fired.
I solved this now by checking the checkboxes state, each time somebody clicks on the div-element where the checkbox and the link is in. Now when the link changes the checkbox's state, the onclick event of the div element is fired as well. Not very nice, but it works.

#6 Michael on Jun 30th, 2008

@mark:

<a href="#" rel="select">Select All</a>

$('a[rel=select]').toggle(function() {
$(input[type=checkbox]).attr('checked', true);
$(this).html('Select None');
}, function() {
$(input[type=checkbox]).attr('checked', false);
$(this).html('Select All');
});

#7 Mandy on Sep 29th, 2008

http://jetlogs.org/jquery/jquery_select_all.html

#8 Scream on Oct 6th, 2008

http://mirceasoaica.com/select-all-checkboxes-using-jquery/

a diferent way to select all checkboxes using jquery

A Beautiful Site

Search the Notebook

Popular Entries

Related Entries

Archives

Products & Services