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
In this example we will implement this function on ASP.Net server control.
<%@ 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" /> <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>
<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>