Wednesday, October 6, 2010

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:

CheckBox List With Jquery

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

7 comments:

Alex Beston said...

thanks for that!

elec said...

very good rich article. I tried and worked fine. thanks.

Abhishek said...

how to populate gridview on the checklistbox items selection?

Abhishek said...

how to filter the gridview with all the selected checklistbox items?

Arun M said...

Its awesome.... Thanks for this..

Anonymous said...

good one

Rohit Daga said...

how to get values instead of text?

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash