In modern day sites, the user sometimes is presented with multiple options and she can either select individual options or all. The same thought also applies when deselecting the options. For example, in the screen shot below, the user can select one or more options:
Now wouldn’t it be nice that the user had a simple way to select/deselect all the containers in one click?
Question: Using jQuery, provide a simple way for the user to select and deselect all the checkboxes in a checkboxlist.
Let us first build our ASP.NET page. The page will have 2 basic elements: A standalone asp:CheckBox to enable select/deselect all option. An asp:CheckBoxList to hold our user options.
Select one or more containers:<br /><br />
<!-- a standalone checkbox to select/deselect all -->
<asp:CheckBox runat="server" ID="selectAllCb" Text="Select All" />
<!-- our actual list containing user options -->
<asp:checkboxlist runat="server" ID="containerCBL">
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>Micro</asp:ListItem>
<asp:ListItem>Regular</asp:ListItem>
<asp:ListItem>Unknown</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
<asp:ListItem>Virtual</asp:ListItem>
</asp:checkboxlist>
With our ASP.NET page defined, the jQuery part is actually quite simple. All we need to do is to attach to the click() event of the standalone checkbox and copy its checked state to the checkbox list.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectAll.aspx.cs"
Inherits="jQueryInterviewQuestions.SelectAll" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Select/Deselect</title>
<!-- include jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>1:2:3: <script type="text/javascript">4: // hook to the document ready function5: $(document).ready(function ()6: {7: // find the select all checkbox8: var selectAll = $('#<%=selectAllCb.ClientID%>');9:10: // hook onto select all checkbox's click event11: selectAll.click(12: function ()13: {14: // for all input types of checkbox15: // for the container16: // set the attribute to the value17: // of select all checkbox18: $("#<%=containerCBL.ClientID%> input[type='checkbox']").19: attr('checked', selectAll.is(':checked'));20: }21: );22: });23:</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Select one or more containers:<br /><br />
<!-- a standalone checkbox to select/deselect all -->
<asp:CheckBox runat="server" ID="selectAllCb" Text="Select All" />
<!-- our actual list containing user options -->
<asp:checkboxlist runat="server" ID="containerCBL">
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>Micro</asp:ListItem>
<asp:ListItem>Regular</asp:ListItem>
<asp:ListItem>Unknown</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
<asp:ListItem>Virtual</asp:ListItem>
</asp:checkboxlist>
</div>
</form>
</body>
</html>
very good post. Thank you
ReplyDelete