How to Select all Checkbox when Header Checkbox is Selected

Here I have provided the code using javascript to check/uncheck all checkboxes when header checkbox is checked. I recommend JAVA Script because its executed at client side and saves request Round-Trip time.

Here I have provided the code using javascript to check/uncheck all checkboxes when header checkbox is checked. I recommend JAVA SCRIPT because its executed at client side and saves request Round-Trip time. Try using it I am sure you all get benefit well.

Source Code:

<%@ Page language="c#" Codebehind="grid1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.grid1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<
HTML>
<HEAD>
<title>form department</title>
<script type="text/javascript">
function
SelectAll(CheckBoxControl)
{
if (CheckBoxControl.checked == true)
{
var i;
for (i=0; i < document.forms[0].elements.length; i++)
{
if ((document.forms[0].elements[i].type == 'checkbox') &&
(document.forms[0].elements[i].name.indexOf('dgdept_details') > -1))
{
document.forms[0].elements[i].checked = true;
}
}
}
else
{
var i;
for (i=0; i < document.forms[0].elements.length; i++)
{
if ((document.forms[0].elements[i].type == 'checkbox') &&
(document.forms[0].elements[i].name.indexOf('dgdept_details') > -1))
{
document.forms[0].elements[i].checked = false;
}
}
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="WIDTH: 702px; HEIGHT: 216px" cellSpacing="1" cellPadding="1" width="702" border="1">
<TR>
<TD style="WIDTH: 203px; HEIGHT: 54px">
<asp:datagrid id="dgdept_details" DataKeyField="dept_id" runat="server" Font-Names="Verdana" Font-Size="Smaller" AllowPaging="True" AllowSorting="True" Height="136px" Width="581px" PageSize="5" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn>
<HeaderTemplate>
<input type="CheckBox" name="SelectAllCheckBox" onclick="SelectAll(this)">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="chk_dept" runat="server" ></asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid></DIV>
</TD>
</TR>
</TABLE>
</form>
</body>
</
HTML>