Friday, 11 October 2013

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

1 comment
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! 

1 comment :