Tuesday, September 22, 2009

ASP.NET Checkboxlist get values in client side [JQuery]

See my other post, which explains "how to set the value attribute for a single check box through c# code" before proceed to this post.

I know, this is the question most of the ASP.NET developers will ask or look for an answer on why there is no value attribute set for check box when it generates from the ASP.NET checkbox list? Where as the Radio button list, Drop down list and other controls has this value attribute set when you set the data source for them. But why there is no value attribute set for check box list control. Below is the nice explanation and will help you to understand the concept well.

If we assign some data source to the check box list control, then the HTML output is with two controls for each check box as input control with type checkbox and another is label with the text. So, This is the problem. How to get the value of the checkbox in client side using some javascript library? Here we need to think a way of how to set a attribute which holds the value for each checkbox and how to get it.

Below is the solution I found. In your C# code, after you bind the data source for the checkbox list, then need to add extra piece of code below to get our problem solved.

C# code:

foreach (ListItem li in checkBoxList.Items)
li.Attributes.Add("someValue", li.Value);

So, What happening here is, I am just adding extra attribute "someValue" for each check box in a check box list[checkBoxList] and looping through them and assign the actual value to that custom attribute. So that HTML for each checkbox on the page will render like this.

HTML rendered output:


If you observe, there is an extra parent control for each check box control named <SPAN> with the attribute we have set in c# code for each checkbox. Now you have some value set with each checkbox and you can get it on client side easily. [There is no change in C# code accessing values.]

How to access the values on client side?

I am using JQuery, so I will give an example of how to get the values using the JQuery.

To get all checkboxes which are checked under a checkbox list are accessed as follows.

JQuery code:

$("#<%=checkBoxList.ClientID %> input[type=checkbox]:checked").each(function() {
var currentValue= $(this).parent().attr('someValue');
if(currentValue != '')
values += currentValue + ",";
});

So, values is the string which holds all the selected checkbox values in a check box list which are selected with comma separated. I think, now you got an idea of how to access the values in client-side. Hope it will help you to understand what I am trying to say. Please add your valuable comments on it.

8 comments:

  1. 2 points:
    1 - html generated could be table for checkboxlist as well.
    2 - to get the value of all checked value you can get the html of the label. In your each loop you can add the following code:
    $('label[for=' + this.id + ']').html()

    ReplyDelete
  2. Hi there,
    In ASP.NET checkbox list the control won't generate the value attribute at all. Which is encrypted in the hidden field. So, I don't think you can get it through label. What label contains is the text you want to show up for the check box. But value is the actual value for the checkbox to use for some logic. Please let me know, if you have any questions.

    ReplyDelete
  3. @Vojtech, It should work. Because I am not doing anything new here. Can you please tell me about your problem? So that I will get an idea and help you out!!!.

    thanks
    -Praveen.

    ReplyDelete
  4. I tried this also and its not working can you see what I am doing wrong here..

    readCheckBoxList.js file

    I am calling this file:
    function getCheckBoxListItemsChecked(FormView1)
    {
    var elementRef = document.getElementById(FormView1);
    var checkBoxArray = elementRef.getElementsByTagName('input');
    var checkedValues = '';

    for (var i=0; i 0 )
    {
    if ( checkedValues.length > 0 )
    checkedValues += ', ';

    checkedValues += labelArray[0].innerHTML;
    }
    }
    }

    return checkedValues;
    }


    function readCheckBoxList()
    {
    var checkedItems = getCheckBoxListItemsChecked('<%= ChkboxChartRev.rrID %>');
    alert('Items checked: ' + checkedItems);
    }


    aspx page:

    Chart Review:

    Rapid 1
    Rapid 2
    Rapid 3
    Rapid 4
    Rapid 5
    Rapid 6
    Rapid 7



    type="button" onclick="readCheckBoxList();" value="Read CheckBoxList"

    aspx.cs register .js

    protected override void OnPreRender(EventArgs e)
    {
    base.OnPreRender(e);
    LoadScript();
    }
    private void LoadScript()
    {

    String scriptName = "readCheckBoxList";
    String scriptUrl = "~/Scripts/readCheckBoxList.js";
    Type scriptType = this.GetType();

    ClientScriptManager clientScriptManager = Page.ClientScript;

    if (!clientScriptManager.IsClientScriptIncludeRegistered(scriptType, scriptName))
    {
    clientScriptManager.RegisterClientScriptInclude(scriptType, scriptName, ResolveClientUrl(scriptUrl));
    }

    }

    ReplyDelete
  5. Great job!
    Thanks for sharing. This code snippet saved me lots of time.

    ReplyDelete
  6. .NET has the unique quality of language independence and language interoperability.

    http://secureteam.net/Obfuscator.aspx

    ReplyDelete
  7. Awesome .... Thanks a lot for your explaination !!!

    ReplyDelete