Check All Checkboxes in a DataList using ASP.NET and C#

by Erik Lane 29. December 2004 07:34

This is a common task that I searched high and low for but ended up coding along with some pieces from here and there.  All I wanted was to have a group of checkboxes with one being a "select all" that would, naturally, select all others in its group when selected and un-select them when it was un-selected.  My first pass was to use a checkbox list since they were going to be bound to an ArrayList and then have one stand alone check box to use for "all" that would fire an event to iterate through the others.  That required a trip to the server plus some groups have a built-in selection that is equivalent to "all"...that left me with the chance to have two "all" checkboxes.

So I decided to use a DataList and a client-side function.  I have one HtmlInputCheckbox in the DataList and I use the OnItemDataBound event and add an "OnClick" attribute for box that represent "all" for that group.

Here's the DataList in the aspx page.  I'm using the field from the ArrayList as both the value and display text here.

<asp:DataList ID="dataList" OnItemDataBound="DataList_ItemDataBound" Runat=server>
	<ItemTemplate >
		<input type=checkbox id="chkBox" name="chkBox" runat=server
value='<%# Container.DataItem %>'><%# Container.DataItem %> </ItemTemplate> </asp:DataList>

Here is the DataList_OnItemDataBound event handler in the code-behind.
protected void DataList_ItemDataBound(object sender, DataListItemEventArgs e)
{
	if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
	{
		HtmlInputCheckBox chkData = (HtmlInputCheckBox)e.Item.FindControl(chkBox);
		if(chkData.Value.ToLower() == "all")
		{
		   chkData.Attributes.Add("onclick", "CheckAll(this,'" + chkData.Name + "');");
		}
	}
}

Here's the client-side javascript function in the aspx page.
<script language=JavaScript>
function CheckAll(checkAllBox, fieldName)
{
	var frm = document.Form1;
	var actVar = checkAllBox.checked;
	for(i = 0; i < frm.length; i++)
	{
		e = frm.elements[i];
		if (e.type == 'checkbox' && e.name.indexOf(fieldName) != -1)
			e.checked = actVar ;
	}
}
</script>

Tags:

Comments

katie owens
katie owens on 4/25/2005 4:46:00 AM

I am still not sure where you got the Select all checkbox from.  I am using a datalist to get databound items and want to incorporate a select all checkbox in addition to that.

is that what you did?

eriklane
eriklane United States on 4/25/2005 4:56:00 AM

In my example you'll need to have "All" (or something to key on) as a value in the data you are binding to your DataList.

Assume the ArrayList I'm binding to my Datalist has these values "All,Some,None".  When that list is bound I check for the one that is "All" and then add the onclick attribute.

Hope this makes more sense.

katie owens
katie owens on 4/25/2005 7:40:00 AM

It does.  Figured it out right after I sent response.

eriklane
eriklane United States on 4/25/2005 7:49:00 AM

That's great, glad you got it working.

nick
nick on 12/2/2007 9:07:00 AM

I have a unique situation in that I have my datalist seperated by categories and checkboxes within each category. The client wants a select all option for each category of checkboxes.

Any ideas on how to achieve this?

eriklane
eriklane United States on 12/3/2007 4:45:00 AM

Nick - The scenario is all the same...it doesn't matter how the check boxes get displayed or how they are grouped.  You just need to identify the ones that are "check all" and identify the check boxes that belong to that check all box  (all start with the group name or something).  Then you could use the same I'm describing above except in the CheckAll function you would check all of the ones that are part of the category that was selected.

awclemen
awclemen on 9/9/2008 2:43:00 PM

I'm new to asp.net, so excuse this idiotic question, but how do you access the checkbox value when all the checkboxes have the same id?  I realize you need to cast the object to a HtmlInputCheckBox class, but I can't find a way to access the object when the form is submitted.  Thanks!

Moses
Moses United States on 12/14/2008 8:28:36 PM

Very good post...Working very fine..

Suvabrata Roy
Suvabrata Roy India on 2/26/2009 6:46:40 AM

Good But In Windows...

This Is The Code

for(int i=0 ; i<=checkboxlist.Items.Count; i++)
checkboxlist.SetItemChecked(i, true);

this will checked all in a checkboxlist
Thank U....
Suvabrata Roy
SuvabrataRoy@gmail.Com

swati
swati United States on 4/13/2009 10:02:41 PM

Thank you so much! you are a life saviour ERIK! Cheers!

Comments are closed