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 ...

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.

0 thoughts on “jQuery: Checking or Unchecking All Checkboxes

  1. 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! :)

  2. 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! :)

  3. 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 :)

     
           

  4. 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?

  5. 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?

    1. 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!

Leave a Reply