Get CheckBoxList values using Javascript

Posted: August 14, 2008 in ASP.NET, Javascript
Tags: , ,

Today I have spend lot of time to get the values of each item of CheckBoxList using javascript. And finally I got success.

What I want to do is:

I have one CheckBoxList control that binds values at runtime from the database, and when I click on a button from the page, I want to get the values (Database Primary Key) from the CheckBoxList, but for the checked checkboxes only.

Here is the code, what I have achieved so far. This code works fine with IE 7, but I am not sure with the FireFox.

ASPX page: <asp:CheckBoxList ID="CheckBoxList1" runat="server" OnDataBound="CheckBoxList1_DataBound" >
<asp:ListItem Value="First1" Text="First" ></asp:ListItem>
<asp:ListItem Value="second2" Text="Second"></asp:ListItem>
</asp:CheckBoxList>
<asp:Button ID="Button1" runat="server" Text="Button" />
<script language="javascript" type="text/javascript">
function CheckItem()
{
var tbl = document.getElementById('<%= CheckBoxList1.ClientID %>').childNodes[0];
for(var i=0; i<tbl.childNodes.length;i++)
{
for(var k=0; k<tbl.childNodes[i].childNodes.length; k++)
{
if(tbl.childNodes[i].childNodes[k].nodeName == "TD")
{
var currentTD = tbl.childNodes[i].childNodes[k];
for(var j=0; j<currentTD.childNodes.length; j++)
{
if(currentTD.childNodes[j].nodeName == "SPAN")
{
var currentSpan = currentTD.childNodes[j];
for(var l=0; l<currentSpan.childNodes.length; l++)
{
if(currentSpan.childNodes[l].nodeName == "INPUT" && currentSpan.childNodes[l].type == "checkbox")
{
var currentChkBox = currentSpan.childNodes[l];
if(currentChkBox.checked)
{
alert(currentSpan.alt);
}
}
}
}
}
}
}
}
}
</script>

Code Behind:

Button1.Attributes.Add("onclick", "javascript:CheckItem();");
CheckBoxList1.DataSource = <Your Dataset>;
CheckBoxList1.DataTextField = "PersonName";
CheckBoxList1.DataValueField = "PersonID";
CheckBoxList1.DataBind();
protected void CheckBoxList1_DataBound(object sender, EventArgs e)
{
CheckBoxList chkList = (CheckBoxList)(sender);
foreach (ListItem item in chkList.Items)
{
item.Attributes.Add("alt", item.Value);
}
}

About these ads
Comments
  1. Smita D. says:

    Hi,

    I also have the same requirement as what you have mentioned. Your code has completely solved my problem. I would like to thank you for this useful code.

  2. HorribleSree says:

    but….i need value and text of checkbox……within javascript;
    my checkboxlist is filled from a database…
    My requirement is when selecting checkbox list..i have to fill alist box with those value and text of checkbox…..all in javascript and in one function…i partially solved this by using .nextSibling and innerText…but i only text…..

  3. Simon Goodchild says:

    Thank you for this script – I’ve spent hours trying to understand how to do this, even tried the piggy backing method you use, but not with the ALT tag.

    Thank you!! :)

  4. Wei says:

    It not working in FireFox3.0.7, any comment on it?

  5. gayathri says:

    thank u so much its really helps me lot….

  6. Viral Sarvaiya says:

    thanks for the javascript, but this javascript is not working in firefox and safari, so please let me know what i have to change to run this script in firefox or on other browser.

    waiting for the replay…..

  7. Kostkac says:

    When i realize this is a big problem (not working in IE and safari, no other approach), i do a round trip to server, but with AJAX, so its not that painful. This way is solution to many Javascipt pitfalls – integrate AJAX and do it with c# code :))

  8. Duncan says:

    Very pleased to have found this, saved me much time. Thanks!

  9. bhupal says:

    thank you very it is working.I also tested it for radio button list .
    please keep on going like this.

  10. Mathew says:

    Hi,

    Very good idea never had the “alt” idea stuck in my head. One suggestion i have is that the code to add the attributes should be just after the checkbox is bound and not on the item data bound. We just need a single iteration to add the attributes to all the checkbox items inside the databound it would be unwanted looping. Also i have an alternate code i use its pasted below it does not use the table node:

    var chk = document.getElementById(”)
    var checkbox = chk.getElementsByTagName(“input”);
    var label = chk.getElementsByTagName(“label”);
    var span = chk.getElementsByTagName(“span”);

    for(i=0; i<checkbox.length; i++)
    {
    if (checkbox[i].checked)
    {
    if (hiddtxt.value.length == 0)
    {
    hiddtxt.value = label[i].innerHTML + "-" + span[i].alt;
    }
    else
    {
    hiddtxt.value = hiddtxt.value + ", " + label[i].innerHTML + "-" + span[i].alt;
    }
    }
    }

    Cheers!
    Mathew

  11. Zoran says:

    The code is excellent, thank you. But if we execute some server code, on reload of page, alt atribute is lost…. if we didn’t do data bind for CheckBox all the time on “Page_Load”, but only on “If Not Page.IsPostBack”…. any idea?

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s