Saturday, 12 October 2013

Tutorial 4: Select Deselect all CheckBoxes of ASP.NET CheckBoxList using jQuery

2 comments
In my previous article, I've explained how to display selected items of ASP.NET CheckBoxList using jQuery. You can also see list of ASP.NET+jQuery tutorials. In this tutorial, I am going to explain how to Select Deselect or Check Uncheck all CheckBoxes of ASP.NET CheckBoxList using jQuery. I'll be using one additional CheckBox control to perform this functionality. This additional CheckBox will be used to Select Deselect all CheckBoxes of ASP.NET CheckBoxList.
  • Create a new web form Example1.aspx in ASP.NET project and add one ASP.NET CheckBoxList (chkboxList) and one CheckBox (chkboxSelectAll) control.
  • <asp:CheckBox ID="chkboxSelectAll" runat="server" Text="Select All" />
                <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>
    
  • Write below jQuery code to Check Uncheck all CheckBoxes of ASP.NET CheckBoxList chkboxList on CheckBox (chkboxSelectAll) click event.
    $("#<%=chkboxSelectAll.ClientID%>").click(function () {
                    if ($(this).is(":checked")) {
                        $("#<%=chkboxList.ClientID%> input[type=checkbox]").attr("checked", "checked");
                    }
                    else {
                        $("#<%=chkboxList.ClientID%> input[type=checkbox]").removeAttr("checked");
                    }
                });
    
  • In above code, if  CheckBox chkboxSelectAll is check then I am adding check attribute to all CheckBox of CheckBoxList chkboxList else remove check attribute for CheckBox of CheckBoxList chkboxList. 
  • Whenever any CheckBox of CheckBoxList chkboxList is getting clicked then we have to also verify all CheckBox of CheckBoxList chkboxList. If all CheckBox of CheckBoxList chkboxList are checked then we have to add check attribute to CheckBox chkboxSelectAll else we have to remove check attribute for CheckBox chkboxSelectAll.
    $("#<%=chkboxList.ClientID%>").click(function () {
                    if ($("#<%=chkboxList.ClientID%> input[type=checkbox]:checked").length == $("#<%=chkboxList.ClientID%> input").length) {
                        $("#<%=chkboxSelectAll.ClientID%>").attr("checked", "checked");
                    } else {
                        $("#<%=chkboxSelectAll.ClientID%>").removeAttr("checked");
                    }
    });

Complete Code

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.8.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#<%=chkboxSelectAll.ClientID%>").click(function () {
                if ($(this).is(":checked")) {
                    $("#<%=chkboxList.ClientID%> input[type=checkbox]").attr("checked", "checked");
                }
                else {
                    $("#<%=chkboxList.ClientID%> input[type=checkbox]").removeAttr("checked");
                }
            });

            $("#<%=chkboxList.ClientID%>").click(function () {
                if ($("#<%=chkboxList.ClientID%> input[type=checkbox]:checked").length == $("#<%=chkboxList.ClientID%> input").length) {
                    $("#<%=chkboxSelectAll.ClientID%>").attr("checked", "checked");
                } else {
                    $("#<%=chkboxSelectAll.ClientID%>").removeAttr("checked");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>Please choose type of subscription letters:</h3>
            <asp:CheckBox ID="chkboxSelectAll" runat="server" Text="Select All" />
            <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>
    </form>
</body>
</html>
Source code can be downloaded from GitHub. Comments and suggestions are most welcome. Happy coding! 

2 comments :

  1. Easily Boost Your ClickBank Traffic And Commissions

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

    ReplyDelete
  2. When weighing up actual cash casino apps, you need to}, first of all with|to begin with}, discover out whether there even is an app , and whether it’s appropriate with each Android and iOS units. You should also to|must also} examine the user interface to verify it appears and feels right on your system. With its choice of 350+ video games, Wild Casino provides a comprehensive cell 원 엑스 벳 casino expertise. But it’s with a high-quality choice of eleven blackjack video games the place we really feel the site stands out, and the place it'd enchantment to players with an urge for food for beating the dealer. It is also be|can be} essential to remember that that|do not forget that} while gambling is growing rapidly in many of} places, in others it's completely or partially prohibited. As well as within the majority of the US, sports activities betting is illegal the law|is unlawful} in India, Pakistan, and China, three of the biggest gambling markets on the planet.

    ReplyDelete