Asp.net J query

Jquery multiple checkbox with gridview

Explained with an example and attached sample code, explain how to implement check uncheck all or select unselect all functionality for CheckBox in GridView ItemTemplate and HeaderTemplate using jQuery and JavaScript.

In this article I will explain how to implement check uncheck all (select unselect all) functionality for CheckBox in GridView ItemTemplate and HeaderTemplate using jQuery and JavaScript.

<asp:GridView ID=”GridView1″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″

    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>

    <Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <asp:CheckBox ID=”chkHeader” runat=”server” />

            </HeaderTemplate>

            <ItemTemplate>

                <asp:CheckBox ID=”chkRow” runat=”server” />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″ />

        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″ />

    </Columns>

</asp:GridView>

<hr />

<asp:GridView ID=”GridView2″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″

    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>

    <Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <asp:CheckBox ID=”chkHeader” runat=”server” />

            </HeaderTemplate>

            <ItemTemplate>

                <asp:CheckBox ID=”chkRow” runat=”server” />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″ />

        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″ />

    </Columns>

</asp:GridView>

<hr />

<asp:GridView ID=”GridView3″ runat=”server” HeaderStyle-BackColor=”#3AC0F2″

    HeaderStyle-ForeColor=”White” AutoGenerateColumns=”false”>

    <Columns>

        <asp:TemplateField>

            <HeaderTemplate>

                <asp:CheckBox ID=”chkHeader” runat=”server” />

            </HeaderTemplate>

            <ItemTemplate>

                <asp:CheckBox ID=”chkRow” runat=”server” />

            </ItemTemplate>

        </asp:TemplateField>

        <asp:BoundField DataField=”Name” HeaderText=”Name” ItemStyle-Width=”150″/>

        <asp:BoundField DataField=”Country” HeaderText=”Country” ItemStyle-Width=”150″/>

    </Columns>

</asp:GridView>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>

<script type=”text/javascript”>

    $(“[id*=chkHeader]”).live(“click”function () {

        var chkHeader = $(this);

        var grid = $(this).closest(“table”);

        $(“input[type=checkbox]”, 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*=chkRow]”).live(“click”function () {

        var grid = $(this).closest(“table”);

        var chkHeader = $(“[id*=chkHeader]”, grid);

        if (!$(this).is(“:checked”)) {

            $(“td”, $(this).closest(“tr”)).removeClass(“selected”);

            chkHeader.removeAttr(“checked”);

        } else {

            $(“td”, $(this).closest(“tr”)).addClass(“selected”);

            if ($(“[id*=chkRow]”, grid).length == $(“[id*=chkRow]:checked”, grid).length) {

                chkHeader.attr(“checked”“checked”);

            }

        }

    });

</script>

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.