.NET Mixer: Jquery to Get selected items from CheckBoxList

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 structer. Here i use comma separator to identify unique selected items. The output screen is given below:

Jquery Method:

<script type="text/javascript">
    $(document).ready(function() {
    $('#cmdGet').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();
            }
        });
        alert(values);
        return false;
    });
    });  
    </script>

Complete HTML Markup language to run the example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckboxList_Jquery.aspx.cs" Inherits="CheckboxList_Jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ASP.NET Checkboxlist get values in client side using JQuery</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    $('#cmdGet').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();
            }
        });
        alert(values);
        return false;
    });
    });  
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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>
        </asp:CheckBoxList>
        <hr />
        <asp:Button runat="server" ID="cmdGet" Text="Get Selected Values" />
    </div>
    </form>
</body>
</html>

Now you got an idea of how to access the values in client-side. Hope it will help you to findout the selected items of checkbox list using jquery.

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

.NET Mixer

Wednesday, October 6, 2010

Jquery to Get selected items from CheckBoxList

7 comments: