ASP.Net GridView Multiple Header Check Uncheck all CheckBoxes in using jQuery

Hi Bhavleen,

Refer below sample.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $("[id*=chkHeader1]").live("click", function () {
        var chkHeader = $(this);
        var grid = $(this).closest("table");
        $("input[id*=chkRow1]", grid).each(function () {
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } else {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });
    });

    $("[id*=chkRow1]").live("click", function () {
        var grid = $(this).closest("table");
        var chkHeader = $("[id*=chkHeader1]", grid);
        if (!$(this).is(":checked")) {
            $("td", $(this).closest("tr")).removeClass("selected");
            chkHeader.removeAttr("checked");
        } else {
            $("td", $(this).closest("tr")).addClass("selected");
            if ($("[id*=chkRow1]", grid).length == $("[id*=chkRow1]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
            }
        }
    });
    $("[id*=chkHeader2]").live("click", function () {
        var chkHeader = $(this);
        var grid = $(this).closest("table");
        $("input[id*=chkRow2]", grid).each(function () {
            if (chkHeader.is(":checked")) {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } else {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });
    });

    $("[id*=chkRow2]").live("click", function () {
        var grid = $(this).closest("table");
        var chkHeader = $("[id*=chkHeader2]", grid);
        if (!$(this).is(":checked")) {
            $("td", $(this).closest("tr")).removeClass("selected");
            chkHeader.removeAttr("checked");
        } else {
            $("td", $(this).closest("tr")).addClass("selected");
            if ($("[id*=chkRow2]", grid).length == $("[id*=chkRow2]:checked", grid).length) {
                chkHeader.attr("checked", "checked");
            }
        }
    });
</script>
<div>
    <asp:GridView ID="GridViewTest" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="Column 1">
                <HeaderTemplate>
                    <asp:CheckBox ID="chkHeader1" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkRow1" runat="server" Text="CheckBox 1" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Column 2">
                <HeaderTemplate>
                    <asp:CheckBox ID="chkHeader2" runat="server" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="chkRow2" runat="server" Text="CheckBox 2" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("Id");
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        GridViewTest.DataSource = dt;
        GridViewTest.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.Add("Id")
        dt.Rows.Add(1)
        dt.Rows.Add(2)
        GridViewTest.DataSource = dt
        GridViewTest.DataBind()
    End If
End Sub

Screenshot