Hi, Here I will Explain how to select and deselect all the Checkboxes that placed in the Gridview in Single Click in the Header CheckBox using JQuery. Here i have loaded a Gridview from the DataTable and placed a Checkbox using TemplateField.By Clicking the Checkbox in Gridview Header it will select and deselect all the Checkboxes in Each of gridview.
AspxCode :
<html>
<head id="Head1" runat="server">
<title>Fourthbottle.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js></script>
<script type="text/javascript">
function
checkRecAll()
{
var len =
document.forms['form1'].elements.length;
var fields =
document.forms['form1'].elements;
var chkStatus =
document.all("GridView1_chkselall").checked
for (i = 0; i
< len; i++) {
if
((fields[i].name.indexOf('chkrecords') != -1)
|| (fields[i].name.indexOf('chkrecords') !=
-1)) {
if (chkStatus ==
true)
{
if
(document.all(fields[i].name).disabled == false)
{
document.all(fields[i].name).checked = true;
}
}
else {
document.all(fields[i].name).checked = false;
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox name="chkselall"
ID="chkselall"
runat="server"
onclick="javascript:checkRecAll()">
</asp:CheckBox>Select All
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkrecords"
runat="server"></asp:CheckBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name"
HeaderText="Name"
/>
<asp:BoundField DataField="Age"
HeaderText="Age"
/>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# Code :
using System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
namespace
ChartsApp
{
public partial class JqueryGrid : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
DataTable
dtable = new DataTable("TableName");
dtable.Columns.Add("Name");
dtable.Columns.Add("Age");
DataRow
drow1;
drow1 = dtable.NewRow();
dtable.Rows.Add("Venki
Livestrong", "24");
dtable.Rows.Add("Karthi Raj",
"23");
dtable.Rows.Add("Raja
Duaraiswamy", "22");
GridView1.DataSource = dtable;
GridView1.DataBind();
}
}
}
