Thomas’ Developer Blog

January 30, 2008

CheckBoxList Uncheck/Clear Script

Filed under: Asp.Net Framework 2.0, javascript — Tags: , , , , — sanzon @ 9:42 am

So Asp.NET 2.0 has the wonderful web control called checkbox list!  I’m going to assume you already know what a checkboxlist element is.  If not the best place to start would be www.w3schools.com.

The problem with checkbox list item is that whenever you use them there is no way of actually clearing all the items once they have been checked besides sitting there and unchecking them all one by one.  This can be annoying at times.  The example I’m going to use is in reference to a database project I’m working on where the user will be able to select multiple genres.

Let’s start off by looking at the code to create a checkboxlist and go over a few quick things.


<asp:checkboxlist id="cblGenre" datasourceID="DSet_Genre"
 DataTextField="name"
 DataValueField="genre_id"
 TextAlign="Right"
 RepeatColumns="3"
 CellSpacing="1"
runat="server">
</asp:checkboxlist>

Simple right? Well to quickly go over a few simple attributes/members.  First off if you notice I went ahead and setup the CheckBoxList with a datasource.  Don’t worry about this.  Simply note the fact that when the table is generated through the datasource that it will desplay list of checkbox items.

Now how do we uncheck all those boxes when they appear?  The easiest way to do this is by looking at the source code once the page is rendered on the client side.  You’ll notice it is very important that we use a table format in this case!  You’ll see in a second.


<table id="ctl00_Main_cblGenre" cellspacing="2" border="0">
 <tr>
  <td><input id="ctl00_Main_cblGenre_0" type="checkbox" name="ctl00$Main$cblGenre$0" /><label for="ctl00_Main_cblGenre_0">Action</label></td>  <td><input id="ctl00_Main_cblGenre_4" type="checkbox" name="ctl00$Main$cblGenre$4" /><label for="ctl00_Main_cblGenre_4">Fantasy</label></td>  <td><input id="ctl00_Main_cblGenre_8" type="checkbox" name="ctl00$Main$cblGenre$8" /><label for="ctl00_Main_cblGenre_8">Mystery</label></td>

 </tr><tr>
  <td><input id="ctl00_Main_cblGenre_1" type="checkbox" name="ctl00$Main$cblGenre$1" /><label for="ctl00_Main_cblGenre_1">Adventure</label></td>

  <td><input id="ctl00_Main_cblGenre_5" type="checkbox" name="ctl00$Main$cblGenre$5" /><label for="ctl00_Main_cblGenre_5">Horror</label></td>

  <td><input id="ctl00_Main_cblGenre_9" type="checkbox" name="ctl00$Main$cblGenre$9" /><label for="ctl00_Main_cblGenre_9">Romance</label></td>

 </tr><tr>

  <td><input id="ctl00_Main_cblGenre_2" type="checkbox" name="ctl00$Main$cblGenre$2" /><label for="ctl00_Main_cblGenre_2">Comedy</label></td>

  <td><input id="ctl00_Main_cblGenre_6" type="checkbox" name="ctl00$Main$cblGenre$6" /><label for="ctl00_Main_cblGenre_6">Mecha</label></td>

  <td><input id="ctl00_Main_cblGenre_10" type="checkbox" name="ctl00$Main$cblGenre$10" /><label for="ctl00_Main_cblGenre_10">Science-Fiction</label></td>

 </tr><tr>

  <td><input id="ctl00_Main_cblGenre_3" type="checkbox" name="ctl00$Main$cblGenre$3" /><label for="ctl00_Main_cblGenre_3">Drama</label></td>

  <td><input id="ctl00_Main_cblGenre_7" type="checkbox" name="ctl00$Main$cblGenre$7" /><label for="ctl00_Main_cblGenre_7">Classic</label></td>

  <td></td>

 </tr>
</table>

I know it's a mess.  All you have to understand is the fact that all the information is thrown together into a table.  The problem is how to actually get to the checkbox items since ASP.Net doesn't offer a client side solution to this.  Yes we could simply have a onServerClick event to go ahead and uncheck all values, but in today's web 2.0 world we need more "flash" type events with on the spot rendering.

The Solution
To solve this problem we use the checkboxlist member ClientID.  What ClientID does is retrieve the name the server users to display the element once it has been rendered.  In this case "ctl00_Main_cblGenre."

Now that we have the name of the element we can go ahead and use javascript to generate a solution.

First step is to create a function that will find and clear all the check boxes. Ok this is were the nightmare really starts.

The code for this starts here:


<Script type="text/javascript">
function cblClear(ParDOM) {
}
</Script>

We send the variable ParDOM (ParentDOM) to the function through including the tag <% response.write(cblGenre.ClientID) %> in the function call (normally an anchor element).

Once you get the clientID you can than search for the web control element by using document.getElementById(ParDOM). This will return the area of the checkboxlist. This element will always be in a table format unless you set the repeatlayout otherwise. In this case you better set it back and learn how this method works before attempting to create your own. Though trust me its a lot easier without the table, but it doesn’t look half as nice.

Once you get the table you must than search for all of the search inputs. To do this you use a for loop which will go through all of the child nodes.


for (i = 0; i < document.getElementById(ParDOM).childNodes.length; i++) {
if (document.getElementById(ParDOM).childNodes[i].nodeName == "TBODY") {
alert("Hey I found the table body!");
}
}

What the above code does is look through the childnodes and gets the name of the tags. In this case TBODY is the one we want. So once it finds TBODY it will return us with the correct childNode. IMPORTANT! IE AND FIREFOX DON’T MATCH!!! Yes cross browser compatability is a b*tch. Firefox will return 2 nodes while IE only sees one. The reason is that Firefox will create a text node to hold any text the table may have. So we have to use an if statement to find out if it is the correct tag we need.

The next two steps are very easy after that. Simply search within the TBODY node for the TR node. Remeber there will be more than once TR node. So once you find the TR nodes you will have to search all of them for the TD nodes which have the input and label nodes. We only care about the input node!

Once you find the input node it’s all cake. Simply take the element and set checked to false.

Here is the final code:

<Script type="text/javascript">
function cblClear(ParDOM) {
for (i = 0; i < document.getElementById(ParDOM).childNodes.length; i++) {if (document.getElementById(ParDOM).childNodes[i].nodeName == "TBODY") {for (x = 0; x < document.getElementById(ParDOM).childNodes[i].childNodes.length; x++) {if (document.getElementById(ParDOM).childNodes[i].childNodes[x].nodeName == "TR") {

for (y = 0; y < document.getElementById(ParDOM).childNodes[i].childNodes[x].childNodes.length; y++) {

if (document.getElementById(ParDOM).childNodes[i].childNodes[x].childNodes[y].nodeName == "TD") {

for (z = 0; z < document.getElementById(ParDOM).childNodes[i].childNodes[x].childNodes[y].childNodes.length; z++) {

if (document.getElementById(ParDOM).childNodes[i].childNodes[x].childNodes[y].childNodes[z].nodeName == "INPUT") {

document.getElementById(ParDOM).childNodes[i].childNodes[x].childNodes[y].childNodes[z].checked=false;
}
}
}
}
}
}
}
}
}
}
</Script>

This has been tested with IE7, FF 2.0, and Safari Beta for windows (yes you have to help out the Mac users! After all green is green when it comes to ad hits and sales)

Advertisements

6 Comments »

  1. hi,there
    Thanks for the example.
    This is quite similar to the problem that i had.

    If this comboboxlist,the check all button and the uncheck all button are in a web user control.

    if this control have used twice, do you have any ideas how to check and uncheck the comboboxlist for indivial one.

    //”””””””””””””””’

    Product Groups 
     

    Premium Cigs

    Value Cigs

    Private Label Cigs

    Z Non Scan

    Liquor

    Groups 
     

    Premium Cigs

    Value Cigs

    Private Label Cigs

    Z Non Scan

    Liquor

    Label

    //”””””””””””””””’

    Any ideas?

    Comment by flora — February 19, 2008 @ 2:49 am

  2. Sorry, i have copy some html code. but it had transfered to the text.
    here is the code:

    @//////////////////////

    Premium Cigs

    Value Cigs

    Private Label Cigs

    Z Non Scan

    Liquor

    Premium Cigs

    Value Cigs

    Private Label Cigs

    Z Non Scan

    Liquor

    Comment by flora — February 19, 2008 @ 2:52 am

  3. You can try checking the innerHTML of the label tags to see if the value is the same. For example..

    If (Node.innerHTML == “Liquor”) {
    Node.ParentNode.Checked = False
    }

    Or something like that. It should work just find doing that though. Of course you’ll have to check for the node name to make sure it’s a label. So it’s simply the same thing as I explained, just take it an extra step to search for the label node instead, then check the innerHTML and if it matches, get the parent of that node, which is the checkbox, and set checked to false.

    Hope that helps

    Comment by sanzon — February 20, 2008 @ 2:18 am

  4. Thanks Thomas. This helped allot.
    I have simplified it a bit. here is my version:
    function SetChecked (val, chkName) {
    for (i = 0; i < document.getElementById(chkName).childNodes.length; i++) {
    if (document.getElementById(chkName).childNodes[i].type == ‘checkbox’) {
    document.getElementById(chkName).childNodes[i].checked = val;
    }
    }
    }

    The call to this function will look like this:
    <input id=”chkunchk” type=”checkbox” onclick=”SetChecked(this.checked,”);” />Check/Clear All

    Comment by Anton Sabzanov — February 11, 2009 @ 8:18 pm

  5. Every weekend i used to go to see this web page, as i want enjoyment, since this
    this site conations actually nice funny stuff too.

    Comment by Trista — July 23, 2013 @ 10:32 pm

  6. Or (with the 608) you are able to use those speakers as a stereo in another room.
    Some will surely have as much as 500-700 watts or more of total power.
    Sony BDP-S570 is a really sleek looking player
    even though it doesn’t have that flip down panels which a great deal of BD players are getting nowadays in order to take a look cool.

    Comment by http://smilestootybooty.tumblr.com/ — August 10, 2013 @ 12:57 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: