HOW TO: Select/Deselect All Checkboxes
Aug
15
Written by:
8/15/2007
Invariably, at some point you will have a control that needs to display a list of options as a checkbox list. In order for our application to be user-friendly, we will need to provide the ability for the end-user to Select All checkboxes with a single click, as well as uncheck all checkboxes. With a bit of client-side code, this is easily achieved.
First of all, you will need to have a UserControl or Page that has a CheckBoxList control added to it. Next, you need to have a DataSource loading into the CheckBoxList control. These steps are outside of the scope of this blog entry.
Once you have accomplished the preceding steps, it will be important that you have the checkboxes contained inside of a parent element. If you have the CheckBoxList RepeatLayout set to "table", then this is already done for you. Otherwise, you should have the checkbox list in a DIV or TD with the Id attribute assigned to it. It is imperative that the value you assign to the Id attribute be unqiue on the entire page.
The result should be something like the following:
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="Normal"
RepeatColumns="3" RepeatDirection="horizontal" RepeatLayout="table"
TextAlign="right" />
Next, we will need a few client-side events to handle the select all or deselect all action that the end-user will initiate through a click of their mouse. Here are some examples of what you may use:
function selectAllCheckBoxes(){
var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
var col = ctrl.getElementsByTagName('input');
var chkSelected = (!areCheckboxesSelected());
for (i = 0; i < col.length; i++){col[i].checked = chkSelected;}
chkSelected = !chkSelected;
}
function validateCheckboxes(){
var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
var col = ctrl.getElementsByTagName('input');
var blnResult = true;
var intCount = 0;
for (i = 0; i < col.length; i++){if(col[i].checked){intCount = intCount + 1;}}
if(intCount == 0){alert('Please check at least one checkbox.');return false;}
return true;
}
function areCheckboxesSelected(){
var ctrl = document.getElementById('<%= Me.CheckBoxList1.ClientID %>');
var col = ctrl.getElementsByTagName('input');
for (i = 0; i < col.length; i++){if(col[i].checked){return true;}}
return false;
}
Finally, you will need a link on the page to allow the end-user to initiate the event we will create soon. Really, you can use any HTML element that allows the "onclick" attribute, but we will just use a link here.
<a href="javascript:void(0);" onclick="selectAllCheckBoxes();">Select/Deselect All</a>
Yippee! It works!
Once all of these pieces are in place, you should be able to run your project and see the results. Go ahead and try in Firefox and IE.
Important Side-Note
On a side-note, it would be a great idea for you to install the Firebug plug-in for FireFox, and the IE Developer add-on for Internet Explorer. These tools had proved to be extremely helpful in creating and debugging client-side JavaScript and HTML markup.