In this article I will explain with an example, how to get Text and Value of selected (checked) CheckBoxes from CheckBoxList control using jQuery in ASP.Net.
CheckBoxList control is rendered as HTML Table with CheckBoxes and Label elements and hence to get the Text and Value of selected (checked) CheckBoxes of the CheckBoxList control, each CheckBox and its corresponding Label needs to be referenced using jQuery.
HTML Markup
The HTML Markup consists of an ASP.Net CheckBoxList and a Button.
<asp:CheckBoxList ID="chkFruits" runat="server">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" Selected="True" />
<asp:ListItem Text="Guava" Value="4" />
</asp:CheckBoxList>
<asp:Button ID="btnGet" Text="Get Selected Items" runat="server" />
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.
![Get Selected Text and Value of CheckBoxList using jQuery in ASP.Net]()
Get Selected Text and Value of ASP.Net CheckBoxList using jQuery
When the btnGet Button is clicked, the following jQuery event handler is executed. First the reference of all the CheckBoxes which are checked in the CheckBoxList are determined.
A loop is executed over all checked items and the Value part is fetched and stored in a variable. For the Text part, the associated Label element is selected and its contents are stored in a variable.
Finally the Text and Value parts of all the selected CheckBoxList Items is displayed using JavaScript alert message box.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnGet]").click(function () {
var checked_checkboxes = $("[id*=chkFruits] input:checked");
var message = "";
checked_checkboxes.each(function () {
var value = $(this).val();
var text = $(this).closest("td").find("label").html();
message += "Text: " + text + " Value: " + value;
message += "\n";
});
alert(message);
return false;
});
});
</script>
Screenshot
![Get Selected Text and Value of CheckBoxList using jQuery in ASP.Net]()
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
