Check and uncheck all checkboxes in CheckBoxList using jQuery

Mohammed Imtiyaz Dec 10, 2014

Checkbox plays a key role in forms. Sometimes there is a need to Check/Uncheck all options then, how it happens and what technique is used to do this?

In this tutorial we are going to learn about how to check and uncheck all checkboxes in a checkboxlist using jQuery

Demo

Check and uncheck all checkboxes in CheckBoxList using jQuery

In this example we will implement this function on ASP.Net server control.

Aspx

<%@ Page Language="C#" %>

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <script src="js/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <form id="form1" runat="server">

            <div class="checkboxlistHeader">
                <asp:CheckBox ID="chkAll" Text="Select All" runat="server" Font-Bold="True" ForeColor="#009933" />&nbsp;
                <asp:Label ID="lblTotalSelectedEmailCount" runat="server" ForeColor="Red" Style="font-weight: 700" Text=""></asp:Label>
            </div>

            <div class="scrollableDiv">
                <asp:CheckBoxList ID="cblSubscribedUsers" runat="server" CssClass="inputCheckboxList">
                    <asp:ListItem>ASP.Net</asp:ListItem>
                    <asp:ListItem>C#</asp:ListItem>
                    <asp:ListItem>Vb.net</asp:ListItem>
                    <asp:ListItem>Html</asp:ListItem>
                    <asp:ListItem>Ajax</asp:ListItem>
                    <asp:ListItem>CSS</asp:ListItem>
                    <asp:ListItem>SQL Server</asp:ListItem>
                </asp:CheckBoxList>
            </div>
        </form>
    </body>
    </html>

JavaScript Function

<script language = "javascript" type = "text/javascript" >
    $(function checkUncheck() {
        $("[id*=chkAll]").bind("click", function() {
            if ($(this).is(":checked")) {
                $("[id*=cblSubscribedUsers] input").attr("checked", "checked");
            } else {
                $("[id*=cblSubscribedUsers] input").removeAttr("checked");
            }
            document.getElementById("<%= lblTotalSelectedEmailCount.ClientID %>").innerHTML = $("[id*=cblSubscribedUsers] input:checked").length + " item(s) selected";
        });

        $("[id*=cblSubscribedUsers] input").bind("click", function() {
            if ($("[id*=cblSubscribedUsers] input:checked").length == $("[id*=cblSubscribedUsers] input").length) {
                $("[id*=chkAll]").attr("checked", "checked");
            } else {
                $("[id*=chkAll]").removeAttr("checked");
            }
            document.getElementById("<%= lblTotalSelectedEmailCount.ClientID %>").innerHTML = $("[id*=cblSubscribedUsers] input:checked").length + " item(s) selected";
        });
    });
</script>