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.
How to load asp. Net checkboxlist using jquery or JavaScript
ASP.Net CheckBoxList control does NOT render the value attribute on the input type=checkbox control! I really really wish it did though…
Very well explained how to use jquery to work with checkbox control. Thanks!!!
This is just awesome! Do you know how to add and remove items from a checklistbox?