Saturday 12 October 2013

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

Leave a Comment
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! 

0 comments :

Post a Comment