Using jQuery to select/deselect Gridview checkboxes

I’ve been using jQuery more and more lately. I’ve been studying it closely now specially how to work with its API and has been well surprised at the cool things that it can do. After several hours (more like days and days) of examining its capabilities, I was able to put together a project with several pages of demos that highlights some of its functions, events, DOM manipulation, etc. Learning how cool it can accomplish things, I’d though of what practical applications can I use it for in the real world. None of this will matter if I can’t apply it anywhere else besides building fancy highlighting of text, etc.

jQuery in real world application:
So why not start somewhere such as a Gridview? One common application of Javascript that’s common in tabular type control such as the Gridview is the ability to select/deselect several checkboxes at the time. I’ve seen codes after codes of this implementation but line composes of many lines and none seems to be simple and straight-forward. Since jQuery extends Javascript, the challenge here is to iterate through the input checkboxes by means of minimal or somehow smaller lines of codes.

I’m pretty sure there’s a handful ways of accomplishing this task and one might argue about the usage of $().each() which is a function that iterates through the context of all matched element(s). As far as I know, there’s two easy ways to accomplish the task without using an iteration. One is to refer the input name/id of the checkbox, assuming that you have an id for the input (which would be exactly the same for each row).

Markup of the Gridview:

   1: <asp:TemplateField>

   2:     <HeaderTemplate>

   3:         <input id="headercheck" type="checkbox" />

   4:     </HeaderTemplate>

   5:     <ItemTemplate>

   6:         <input id="rowcheck" type="checkbox" />

   7:     </ItemTemplate>

   8: </asp:TemplateField>

In your script, you can easily refer to each instances of the rowcheck by doing this, then perform a function accordingly (see code below). This is probably a safer approach since you’re pointing to a specific id. This is perfect if you have another column that also uses a checkbox control.

   1: $("#rowcheck").attr("checked", function(){});

A more generic approach would be as follows (see code below). The grdWhatever refers to the id of the Gridview. Something like the code below would work only if only 1 column uses a checkbox since this approach would get every single checkboxes within that specific id of the Gridview that has an input type of checkbox. In most cases, checkboxes are rarely used no more than in a single column.

   1: $("#grdWhatever input:checkbox").attr("checked", function() { });

Putting it all together:

   1: $(document).ready(function() {

   2:     $("#headercheck").click(function() {

   3:         this.checked = !(this.checked == true);

   4:         var ischecked = !(this.checked == true);

   5:         $("#grdWhatever input:checkbox").attr("checked", function() {

   6:             this.checked = ischecked;

   7:         });

   8:     });

   9: });

The headercheck refers to the header input checkbox that triggers the event  to select/deselect the underlying checkboxes. Line 3 reverses the current selection then a variable was introduced to hold whatever the selection was. It then proceeds the iteration of all checkboxes within grdWhatever and apply the same selection to them.With only 7 lines of codes (less the document.ready function), you can't go wrong with this type of implementation. It's readable and very simple to implement.

On my next post, I’ll probably be posting more jQuery applications to solve common issues and/or build upon old Javascript codes and somehow compress them.

- Dennis
menacestudio.com