In this article I will explain with an example, how to implement ASP.Net CheckBoxList SelectedIndexChanged event in jQuery.
The SelectedIndexChanged event is a Server Side event of ASP.Net CheckBoxList and in jQuery which is Client Side library built over JavaScript programming language, jQuery Change event handler is being used.
HTML Markup
The HTML Markup consists of an ASP.Net CheckBoxList.
<asp:CheckBoxList ID="chkFruits" runat="server">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Apple" Value="4"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="5"></asp:ListItem>
</asp:CheckBoxList>
Understanding the CheckBoxList on Client Side
The CheckBoxList is rendered as an HTML Table in client side browser. Each item of CheckBoxList is a Table row consisting of a Table Cell with a CheckBox and a Label element.
The CheckBox holds the Value part while the Label element contains the Text part.
![Implement ASP.Net CheckBoxList SelectedIndexChanged event in jQuery]()
Get Selected Text and Value of ASP.Net CheckBoxList using jQuery
Inside the document ready event handler, the CheckBoxes inside the CheckBoxLists are referenced.
Then a loop is executed over the CheckBoxes and each CheckBox is assigned a jQuery Change event handler.
Inside the jQuery Change event handler, the CheckBox which is selected is referenced and then its corresponding Label element is referenced.
Finally the Text and Value of the selected CheckBox of the CheckBoxList is displayed using jQuery Alert message box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var checkboxes = $("[id*=chkFruits] input[type=checkbox]");
checkboxes.change(function () {
var message = "";
checkboxes.each(function () {
if ($(this).is(":checked")) {
var label = $(this).closest("td").find("label").eq(0);
message += "Value: " + $(this).val() +
" Text: " + label.html() + "\n";
}
});
alert(message);
});
});
</script>
Screenshot
![Implement ASP.Net CheckBoxList SelectedIndexChanged event in jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
