aspx Tutorial

NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services,
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Monday, July 11, 2011 Total Views:  

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">&nbsp;</span>

        </p>

    </div>

    </form>

</body>

</html>

 


Output

Download

CheckBoxList-jQuery.rar (1.08 kb)

See live demo

Protected by Copyscape Online Plagiarism Tool

Comments (2) -

error in your demo
error in your demo India
7/10/2013 5:15:22 AM #

Hai in your page when i click any checkbox it is writing on,on,on only. what is the problem

Keven Magee
Keven Magee United States
7/13/2015 8:25:44 AM #

Neat blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple tweeks would really make my blog stand out. Please let me know where you got your theme. With thanks|

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5