Saturday, March 5, 2011

Checkbox-fu with JQuery

The current project that I am is a .net MVC 3 project.  The framework comes with the JQuery library for making client side controls easier to create.  I have only used YUI (2) before, so the concept of a javascript library is not uncommon to me.

I must say that I am really liking the JQuery library.  As with all libraries, it takes a bit to learn the in's and out's of how the library works.  In this post, I am going to show you how to create buttons that will check and uncheck all of the checkboxes on the page.

First of all, the code.
    $("#all").click(function() {
     $(".checkboxes input:checkbox").each(function(){
    }); // end
    $("#none").click(function() {
     $(".checkboxes input:checkbox").each(function(){


If you view the source of this page, you should see the html mark up that I have up above.  It is pretty simple.  I have a div with a class of checkboxes.  Inside that are 4 checkboxes that are currently unchecked.  I then have a span with 2 buttons in it (a select all, and a clear).

The Javascript code itself is pretty easy (as is most things with JQuery).  Since I want my buttons to have functionality provided by the javascript, I need to ensure that my javascript runs after the elements that they affect load.  The easiest way to do this is to wrap all the javascript code in a document.ready block.  JQuery uses the $(document).ready function to accomplish this.

JQuery works on the idea of selectors.  You can use attributes such as id and class to act as selectors.  You can also use keywords such as form to accomplish the same thing.  Be careful if you have more than one form on your page.

Back to the code.  My buttons have an id of all or none respectively.  The line inside the function uses the JQuery selector methods to select multiple html elements.  In this case, it is looking inside any divs with the .checkboxes class.  From that, it will look for any input elements of type checkbox.  The .each method allows you to perform a function on each element in the array that is returned from the JQuery selector method.

The "this" keyword is pretty self explanatory in this case.  It clearly represents the DOM object that I am functioning on.  This is because I have called it form a .each method.  See for more information on the "this" keyword in JQuery.

The last piece of the puzzle is the attr and removeAttr methods.  Basically, this adds an attribute to the DOM object, or removes it.  These are handy methods if you want to quickly disable and re-enable buttons.  In the above case, I am using it to add the checked and remove the checked attribute.

JQuery can do a lot more than this, but this small example gives a small glimps of how powerful the framework is.  You can easily accomplish several tasks with just a couple lines of code.