Learning jQuery

When you've given your users a ton of checkbox input fields that they have to manually check themselves, it's always a nice gesture to give them the option to check all the boxes at once by simply selecting one "Check All" checkbox -- one box to rule them all. Not only does a check all checkbox save your users time and make for a nice user experience, but it's also just super convenient. Even if you have time to do it, no one really wants to through and check dozens of boxes when they could just check one box. And thanks to jQuery, no one should ever have to.

The HTML

To get some context on this jQuery snippet, we're going to need a little HTML to set the scene. So let's say you've got a bunch of checkboxes. You probably know how to write the code for a checkbox input field, so we'll spare you what the code for 20 checkbox fields look like and just give you the code for what exactly pertains to the jQuery snippet in this tutorial: the "Check All" link, and the "Un-Check All" link:

<a rel="50checkboxes" href="#check-all">Check All</a>
<a rel="50checkboxes" href="#uncheck-all">Uncheck All</a>

As you can see, these aren't your typical anchor tags. Instead of a URL as the href value, we've got ID tags: #check-all and #uncheck-all. We'll use these values later to select these particular anchor tags in our jQuery.

Also, don't skip the rel attribute with a value that matches the id value on the div or fieldset element that contains your checkboxes, which should look like this:

<div id="50checkboxes">
   <input type="checkbox">
   ...
   ...
</div>

Don't forget to double check that the fieldset or div ID where your checkboxes live matches the rel value of the anchor tags, because if it doesn't, your code isn't going to work properly. Be sure to style these anchor tags so that they really stand out -- maybe make them buttons, or brightly colored -- so your users are sure to see them. A cool hover effect with a smooth CSS transition can also be a nice touch when styling these links, helping to even further add to the user experience of your checkbox fields.

The jQuery

Now for the jQuery code, which is actually pretty simple and straightforward. Here's the code that you'd use to check all the boxes when the "Check All" link is clicked:

$("A[href='#check-all']").click(function() {
 $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', true);
 return false;
 });

As you can see, we selected the anchor tag with the href value "check-all", and attached that to a .click() trigger event, so that when the link is clicked, all of the input boxes in the fieldset that has the ID matching the anchor tag's rel value are checked using the .attr() method.

To uncheck the boxes is almost the exact same process, check it out below:

 $("A[href='#uncheck-all']").click(function() {
 $("#" + $(this).attr('rel') + " INPUT[type='checkbox']").attr('checked', false);
 return false;
 });

Those simple jQuery functions are all it takes to give your users a great checkbox experience. So what are you waiting for? Go add this code to your projects and webpages immediately!