X

LATEST #JQUERY NEWS

jQuery Snippets: Using jQuery to Check All Boxes


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!

Recently Published

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...

article image
»

Check all checkboxes in HTML table using jQuery

HTML tables are a very handy and useful element. They can adapt to ...

article image
»

Changing images in a loop on hover using jQuery

Why use this Function? Changing images in a loop on mouse over is a ...