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">
</asp:CheckBoxList>
<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";
        CheckBoxList1.DataBind(); 

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

<table id="MainContent_CheckBoxList1">
	<tr>
		<td><input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0" value="1" /><label for="MainContent_CheckBoxList1_0">Item-1</label></td>
	</tr><tr>
		<td><input id="MainContent_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$CheckBoxList1$1" value="2" /><label for="MainContent_CheckBoxList1_1">Item-2</label></td>
	</tr><tr>
		<td><input id="MainContent_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$CheckBoxList1$2" value="3" /><label for="MainContent_CheckBoxList1_2">Item-3</label></td>
	</tr><tr>
		<td><input id="MainContent_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$CheckBoxList1$3" value="4" /><label for="MainContent_CheckBoxList1_3">Item-4</label></td>
	</tr><tr>
		<td><input id="MainContent_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$CheckBoxList1$4" value="5" /><label for="MainContent_CheckBoxList1_4">Item-5</label></td>
	</tr>
</table>
<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 () {           
            selectedValues.push($(this).val());
        });
        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 () {
           alert($ctrls.index($(this)));
        });       
    });

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 () {
            alert($(this).next().html());
        });
    });

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.");
            }
        })

Similarly, you can implement Min Selection criteria.

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