Jun 12, 2012

ASP.NET CheckBoxList Operations with jQuery

This post explains how to perform common operations (like check/uncheck checkboxes by value/text/index, min/max selection limit..etc) on ASP.NET CheckBoxList control using jQuery.

Let’s have following aspx code:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<input type="button" value="OK" id="demo" />  

On server side:

       Dictionary<int,string>  dictItems = new Dictionary<int,string>();
        dictItems.Add(1, "Item-1");
        dictItems.Add(2, "Item-2");
        dictItems.Add(3, "Item-3");
        dictItems.Add(4, "Item-4");
        dictItems.Add(5, "Item-5");

        CheckBoxList1.DataSource = dictItems;
        CheckBoxList1.DataTextField = "Value";
        CheckBoxList1.DataValueField = "Key";

Rendered HTML: The following is the rendered source of above code:

<table id="MainContent_CheckBoxList1">
		<td><input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0" value="1" /><label for="MainContent_CheckBoxList1_0">Item-1</label></td>
		<td><input id="MainContent_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$CheckBoxList1$1" value="2" /><label for="MainContent_CheckBoxList1_1">Item-2</label></td>
		<td><input id="MainContent_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$CheckBoxList1$2" value="3" /><label for="MainContent_CheckBoxList1_2">Item-3</label></td>
		<td><input id="MainContent_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$CheckBoxList1$3" value="4" /><label for="MainContent_CheckBoxList1_3">Item-4</label></td>
		<td><input id="MainContent_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$CheckBoxList1$4" value="5" /><label for="MainContent_CheckBoxList1_4">Item-5</label></td>
<input type="button" value="OK" id="demo" />  

1. Get Value of Selected Items:

    //Get value of selected items
    $("#demo").click(function () {      
        var selectedValues = [];
        $("[id*=CheckBoxList1] input:checked").each(function () {           
        if (selectedValues.length>0) {
            alert("Selected Value(s): " + selectedValues);
        } else {
            alert("No item has been selected.");


2. Get Index of selected items:

 //Get index of selected items
    $("#demo").click(function () {
        var $ctrls = $("[id*=CheckBoxList1] input:checkbox");
        $("[id*=CheckBoxList1] input:checked").each(function () {

It will display 0 based index of selected items. Suppose I select Item-1,Item-3,Item-4 then It’ll give output 0,2,3 in alert boxes.

3. Get Text of Selected Items:

   //Get text of selected items
    $("#demo").click(function () {       
        $("[id*=CheckBoxList1] input:checked").each(function () {

As you’ve seen, Text is placed in label control(next of checkbox) in rendered HTML. So, $(this).next().html() is used to get text.

4. Check/Uncheck All Checkboxes:

 $("[id*=CheckBoxList1] input:checkbox").prop('checked',true); //To check all
 $("[id*=CheckBoxList1] input:checkbox").prop('checked',false);// To uncheck all 

Note: For jQuery 1.6+,use prop and for older version use attr.

Read Also: jQuery .attr() vs .prop()

5. Check Items By Index:

Suppose you have to check items by the given index.

 //Check Items by index
    var selIndex = [0, 2, 3];
    for (var i = 0; i < selIndex.length; i++) {
        $("[id*=CheckBoxList1] input:checkbox").eq(selIndex[i]).prop('checked', true);

Similarly, you can uncheck items by setting false in prop.

6. Check Items By Value:

 //Check Items by value
    var selValue = [1, 2, 4];
    var $ctrls = $("[id*=CheckBoxList1]");
    for (var i = 0; i < selValue.length; i++) {
        $ctrls.find('input:checkbox[value=' + selValue[i] + ']').prop('checked', true);

In above code, checkbox is selected if value exist in selValue array.

7. Check Items By Text:

//Check Items by Text
    var selText = ['Item-1','Item-3'];
    var $ctrls = $("[id*=CheckBoxList1]");
    for (var i = 0; i < selText.length; i++) {
        $ctrls.find('label:contains("' + selText[i] + '")').prev().prop('checked', true);

In this Label text is compared and if text exists then corresponding checkbox is checked. The above code will select Item-1 and Item-3.

8. Max Selection Limit:

The following code limits the number of checkboxes a user can select simultaneously:

  $("[id*=CheckBoxList1] input:checkbox").change(function () {
            var maxSelection = 3;
            if ($("[id*=CheckBoxList1] input:checkbox:checked").length > maxSelection) {
                $(this).prop("checked", false);
                alert("Please select a maximum of " + maxSelection + " items.");

max limit asp.net checkboxlist

Similarly, you can implement Min Selection criteria.

Hope, It helps. Feel free to ask related queries here.


  1. ASP.Net CheckBoxList control does NOT render the value attribute on the input type=checkbox control! I really really wish it did though…

Leave a Reply

Your email address will not be published. Required fields are marked *