In this example, i will discuss how to get selected checkboxes value from ASP.NET CheckBoxList control using jQuery. ASP.NET CheckBoxList control get rendered as input and html <label> tag as label, id attribute will be same for both input and label tag. When user will click on check box, we will find all checkboxes which will be checked and display all checkboxes value in the label.
Here’s an example,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Display checked values from CheckBoxList control using jQuery</title>
<style>
body
{
background: #fff;
font-size: .80em;
font-family: "Helvetica Neue" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxList1.ClientID %> input[type=checkbox]').click(function () {
var values = [];
$('input[type=checkbox]:checked').each(function () {
values.push(this.value);
});
$("#msg").text(values.toString());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Orange</asp:ListItem>
<asp:ListItem>Banana</asp:ListItem>
<asp:ListItem>Pineapple</asp:ListItem>
<asp:ListItem>Grapefruit</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:CheckBoxList>
<p>
<strong>Results:</strong> <span id="msg"> </span>
</p>
</div>
</form>
</body>
</html>
Output
Download
CheckBoxList-jQuery.rar (1.08 kb)
See live demo