How to Select and Unselect all the Checkbox in Gridview using JQuery

Introduction :
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 :

<head id="Head1" runat="server">
<script type="text/javascript" src="></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;
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<asp:CheckBox name="chkselall" ID="chkselall" runat="server" onclick="javascript:checkRecAll()">
</asp:CheckBox>Select All
<asp:CheckBox ID="chkrecords" runat="server"></asp:CheckBox>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Age" HeaderText="Age" />

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");
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;