Please navigate to the bottom of the page for Table of Contents

Saturday, July 16, 2011

jQuery to select/deselect all items in a CheckBoxList

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:

image

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 function
   5:         $(document).ready(function () 
   6:         {
   7:             // find the select all checkbox
   8:             var selectAll = $('#<%=selectAllCb.ClientID%>');
   9:  
  10:             // hook onto select all checkbox's click event
  11:             selectAll.click(
  12:                 function () 
  13:                 {
  14:                     // for all input types of checkbox
  15:                     // for the container
  16:                     // set the attribute to the value
  17:                     // of select all checkbox
  18:                     $("#<%=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>

2 comments:

  1. very good post. Thank you

    ReplyDelete
  2. Really Useful. Thank you! :)

    ReplyDelete