jQuery: Checking or Unchecking All Checkboxes

Providing functionality to check all, uncheck all or even to invert the checkboxes currently selected on a page is pretty simple to achieve with either plain old JavaScript or the newer, more flashy jQuery library. Important too if you think just how much more usable your site becomes with these handy shortcuts available to the user.

Now to select all checkboxes on a page and then check them, one simply has to make use of the handy INPUT[type='checkbox'] jQuery selector call and then follow that up with an attr call in order to change the checked attribute status to true. Finally, you bundle this all up and apply it to the click event of some handy button or span and end up with this:

$('#selectall').click(function(){
	$("INPUT[type='checkbox']").attr('checked', true);
});

Similarly to untick all checkboxes on your page you would go with something like this:

$('#selectnone').click(function(){
	$("INPUT[type='checkbox']").attr('checked', false);
});

The final little piece of magic on display for today is the function to invert the current checkbox tick selection. Basically here we are going to scroll through each checkbox using jQuery’s handy each function and set the checked attribute accordingly based on its currently held value, which in code would look something like this:

$('#selectinvert').click(function(){
	$("INPUT[type='checkbox']").each(function(){
        	if (this.checked == false) {
			this.checked = true;
		} else {
			this.checked = false;
		}
	});
});

Deceptively simple, was it not? :P

Related Posts:

  • Checking and unchecking, or ticking and unticking if you prefer, checkboxes using jQuery is remarkably simple. If you think about it, the checked attribute for a standard HTML checkbox is actually a deprecated "checked = true" and by leaving it out in your checkbox declaration, you are in actual fact setting "chec ...

  • If you have a group of checkboxes on a page, sometimes it is quite nice to give the user some quickfire controls that allows him to select all or select none at a click of a button. Similarly, it is pretty cool to give him the option of inverting his current selection, in other words checking all of those checkboxe ...

  • If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animati ...

  • If you develop websites and work with JavaScript, but have never heard of jQuery before, then it is probably best that you start reading up on it right now. After all, as they like to put it themselves, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animati ...

  • Disabling a button on a webpage using jQuery is remarkable simple - just set the selected button's disabled attribute to true, in other words, make use of a .attr('disabled',true) function call. This can then obviously be extended to disabling all buttons on a webpage using the following snippet of code: $('input[ ...

About Craig Lotter

Craig Lotter is an established web developer and application programmer, with strong creative urges (which keep bursting out at the most inopportune moments) and a seemingly insatiable need to love all things animated. Living in the beautiful coastal town of Gordon's Bay in South Africa, he games, develops, takes in animated fare, trains under the Funakoshi karate style and for the most part, simply enjoys life with his amazing wife and daughter. Oh, and he draws ever now and then too.

  • http://dascritch.net Da Scritch

    Replace
    if (this.checked == false) {
    this.checked = true;
    } else {
    this.checked = false;
    }
    by
    this.checked = !this.checked ;

    simplier, faster, smart

  • http://www.craiglotter.co.za Craig Lotter

    Absolutely agree with you Da Scritch, far more efficient, but in terms of laying out exactly what is happening in terms of logic for more the more junior programmers out there, I prefer laying everything out in a nice and verbose manner so that they can follow step by step.

    Thanks for the snippet though! :)

  • http://www.craiglotter.co.za Craig Lotter

    Absolutely agree with you Da Scritch, far more efficient, but in terms of laying out exactly what is happening in terms of logic for more the more junior programmers out there, I prefer laying everything out in a nice and verbose manner so that they can follow step by step.

    Thanks for the snippet though! :)

  • http://pulse.yahoo.com/_VVFJAAR4PBTTFWNWT2CFRXZRCA Rebecca

    Because select invert is not the same as select all / unselect all I submit to you:

            $(‘#all’).click(function(){
                $(“#container INPUT[type='checkbox'][id!=all]“).each(function(){
                      if ($(‘#all’).attr(‘checked’)) {
                        $(‘#container input[type=checkbox][id!=all]‘).attr(‘checked’, ‘checked’);
                      } else {
                        $(‘#container input[type=checkbox][id!=all]‘).attr(‘checked’, ”);
                      }
                });
            });

    With an html like this:

                           
                                    
                                     ALL
                                    
                                     Data1
                                    
                                     Data2
                            

    Test it out :) http://jsfiddle.net/QxBe4/29/

    Let me know if it can be made simpler or smaller :)

     
           

    • http://www.craiglotter.co.za Craig Lotter

      Thanks Rebecca

  • http://www.ninjaweb.it Cristian

    Check and uncheck with this method works good.
    But if you:
    - check all checkboxes with button;
    - uncheck manually one or two checkboxes;
    - uncheck alla checkboxes with button;
    - check all checkboxes with button
    the last “check-all” check all checkboxes except for the one (or more) you uncheck manually.
    So why does it happen?

  • http://www.ninjaweb.it Cristian

    Check and uncheck with this method works good.
    But if you:
    - check all checkboxes with button;
    - uncheck manually one or two checkboxes;
    - uncheck alla checkboxes with button;
    - check all checkboxes with button
    the last “check-all” check all checkboxes except for the one (or more) you uncheck manually.
    So why does it happen?

    • http://www.craiglotter.co.za Craig Lotter

      Aargh. Thanks to jQuery’s new prop() methods versus attr() (from 1.6 onwards), attr(‘checked’) is no longer guaranteed to work. You now have to use prop(‘checked’) or this.checked to alter/check against. Frustrating. Check out their blog for the changelog for more details!