Friday 11 October 2013

Tutorial 3: Display selected items of ASP.NET CheckBoxList using jQuery

2 comments
In my previous article, I've explained how to disable CUT, COPY and PASTE options for TextBox using jQuery. You can also see list of ASP.NET+jQuery tutorials. In this tutorial, I am going to explain how to display selected items of ASP.NET CheckBoxList using jQuery.
  • Create a new web form Example1.aspx in ASP.NET project and add one ASP.NET CheckBoxList. Also add a div tag to display selected items of the ASP.NET CheckBoxList in runtime.
    <asp:checkboxlist id="chkboxList" runat="server">
                <asp:listitem>News</asp:listitem>
                <asp:listitem>Offers</asp:listitem>
                <asp:listitem>Products</asp:listitem>
                <asp:listitem>Advertisement</asp:listitem>
    </asp:checkboxlist>
    <div id="SelectedItems"></div>
    
  • In the document.ready() event, define the click() function of CheckBoxList.
     $("#<%=chkboxList.ClientID%>").click(function () {
    
  • Create a empty string variable.
     var strSelectedItems = "";
    
  • Use jQuery selector to retrieve all the checked boxes and apply the each() function to
    loop through each element returned.
    $("#<%=chkboxList.ClientID%> input[type=checkbox]:checked").each(function () {
    
    Please note that at run time ASP.NET CheckBoxList will render as table <table id="chkboxList"> and all CheckBox items will render as a <input type="checkbox"> and <label> pair format.
    <table id="chkboxList">
     <tr>
      <td><input id="chkboxList_0" type="checkbox" name="chkboxList$0" value="News" /><label for="chkboxList_0">News</label></td>
     </tr><tr>
      <td><input id="chkboxList_1" type="checkbox" name="chkboxList$1" value="Offers" /><label for="chkboxList_1">Offers</label></td>
     </tr><tr>
      <td><input id="chkboxList_2" type="checkbox" name="chkboxList$2" value="Products" /><label for="chkboxList_2">Products</label></td>
     </tr><tr>
      <td><input id="chkboxList_3" type="checkbox" name="chkboxList$3" value="Advertisement" /><label for="chkboxList_3">Advertisement</label></td>
     </tr>
    </table>
    
  • Get the text of selected CheckBox and append to the string variable strSelectedItems
     strSelectedItems = strSelectedItems + " " + $(this).next().text();         
    
  • As mentioned above, each CheckBox item will render as a <input type="checkbox"> and <label> pair format. The label holds the text of the CheckBox element. Therefore in above code, while retrieving the text of the CheckBox element , we have used $(this).next().text(), where $(this) refers to the current CheckBox element and next() refers to the consecutive <label> element.
  • Display value of string variable strSelectedItems in div after the execution of each() function. 
  •  $("#SelectedItems").text(strSelectedItems);
    

Complete Code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Display selected items of ASP.NET CheckBoxList using jQuery</title>
    <script src="js/jquery-1.8.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=chkboxList.ClientID%>").click(function () {
                var strSelectedItems = "";
                $("#<%=chkboxList.ClientID%> input[type=checkbox]:checked").each(function () {
                    strSelectedItems = strSelectedItems + " " + $(this).next().text();                    
                });
                $("#SelectedItems").text(strSelectedItems);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>Please choose type of subscription letters:</h3>
            <asp:CheckBoxList ID="chkboxList" runat="server">
                <asp:ListItem>News</asp:ListItem>
                <asp:ListItem>Offers</asp:ListItem>
                <asp:ListItem>Products</asp:ListItem>
                <asp:ListItem>Advertisement</asp:ListItem>
            </asp:CheckBoxList>
            <div id="SelectedItems">          
            </div>
        </div>
    </form>
</body>
</html>

Source code can be downloaded from GitHub. Comments and suggestions are most welcome. Happy coding! 

2 comments :

  1. Need To Increase Your ClickBank Traffic And Commissions?

    Bannerizer made it easy for you to promote ClickBank products with banners, simply visit Bannerizer, and grab the banner codes for your favorite ClickBank products or use the Universal ClickBank Banner Rotator Tool to promote all of the available ClickBank products.

    ReplyDelete