Tag Archives: checkbox

jQuery: Invert a Selection of Checked Checkboxes CodeUnit 20 AUG 2010

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 checkboxes currently unchecked, while unchecking all the currently ticked checkboxes.

To do this is fairly simple.

First, we built up a jQuery object containing all checked checkboxes. Then we repeat this for all unchecked checkboxes. Next, using the incredibly useful .each() function, we iterate over both collections and either set or unset the checked attribute accordingly.

In code, your invert function would look like this:

$('#createrightstoggle').click(function(){
    var checked = $('.createrightcheckbox').filter(":checked");
    var unchecked = $('.createrightcheckbox').filter(":not(:checked)");
    checked.each(function(){$(this).prop('checked',false);});
    unchecked.each(function(){$(this).prop('checked',true);});
});

Nifty.

jQuery: Count the Number of Checkboxes Checked on a Page CodeUnit 18 AUG 2010

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, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript!

To return the number of checked or ticked checkboxes on a page using jQuery is in actual fact pretty simple.

By making use of the special :checked selector and combining it with the standard length property, you code snippet to retrieve the number of checked checkboxes on a page looks like this:

alert($(":checkbox:checked").length);

Similarly, if you wanted to locate all the checked checkboxes based on a specific selector grouping, you would make use of the .filter function and combine it with those we used above. So your code would now look as follows:

alert($('.createrightcheckbox').filter(":checked").length);

Note, if you wanted to run the same code above but only pick up on unchecked checkboxes, you could run:

alert($('.createrightcheckbox').filter(":not(:checked)").length);

Nifty.

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

jQuery: How to check and uncheck a Checkbox CodeUnit 10 FEB 2010

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 “checked = false” on that input.

So in order to check a checkbox with jQuery you simple select the checkbox input to be affected and enter:

$('input[name=foo]').attr('checked', true);

Alternatively, to uncheck you actually physicall remove the checked attribute:

$('input[name=foo]').removeAttr('checked');

Pretty simple stuff eh? ;)