Jquery Click Event to get Selected Items or Selected Values of Checkboxlist Asp.Net C# VB.Net

In many forums I found that developers asking this question. I have answered in many forums and now I decide to write a post on how to get selected items or selected values of checkboxlist using Jquery. This is not an easy job. You need to loop through the Checkbox List to get all selected items/values. Here if you look at my code example you will get the loop structure, try to understand clearly. To complete the example, I used a Button control. If the user click on the Button control then the Jquery method iterate through the Checkboxlist items & collect selected Items with comma separator to generate a meaningful alert.

Jquery to get Selected Items of Asp.Net Checkboxlist

First add Jquery Reference:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Now organize the HTML structure like below:

    <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>
            <asp:ListItem Text="Three" Value="3"></asp:ListItem>
            <asp:ListItem Text="Four" Value="4"></asp:ListItem>
            <asp:ListItem Text="Five" Value="5"></asp:ListItem>
        <hr />
        <asp:Button runat="server" ID="cmdGet" Text="Get Selected Values" />

Now write Jquery Method to Get CheckboxList Selected Items:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=cmdGet.ClientID %>').click(function () {
            var values = '';
            $('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function () {
                if (values.length == 0) {
                    values = $('label[for=' + this.id + ']').html();
                else {
                    values += "," + $('label[for=' + this.id + ']').html();
            return false;

Hope now you get an overview on how to get Selected Items of a Checkbox List using jquery.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *