Skip to content


jQuery – Select / Deselect all in 3 lines

A common challenge, and one I haven’t had to tackle in quite some time is select and deselect all functionality for a group of checkboxes. Below I will show you how you can add this functionality to your website with 3 simple lines of javascript / jQuery code.

$("#mySelectAll").click(function() {
    $("INPUT[type='checkbox'][@name='myCheckboxes']").attr("checked", $(this).is(":checked"));
});

Your HTML would look something like this..

<input type='checkbox' id='mySelectAll' value='1'> Select All
<input type='checkbox' name='myCheckboxes' value='1'> One
<input type='checkbox' name='myCheckboxes' value='2'> Two
<input type='checkbox' name='myCheckboxes' value='3'> Three
<input type='checkbox' name='myCheckboxes' value='4'> Four

Just be sure to include the javascript in your document ready, or include the lines after your html is rendered.

Posted in jQuery Plugins & Framework.

One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Vitaly said

    Thank’s for this simple example. And I think will be better do like next: $(“#mySelectAll”).click(function() {
    $(“.myCheckboxes”).attr(“checked”, $(this).is(“:checked”));
    });

Some HTML is OK

(required)

(required, but never shared)

or, reply to this post via trackback.