jQuery: Checking or Unchecking All Checkboxes CodeUnit 08 APR 2010

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:

About Craig Lotter

South African software development manager and senior application developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • 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!