jQuery: Count the Number of Checkboxes Checked on a Page

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.