Select/Deselect All Checkboxes in gridview using JavaScript

Introduction

This post discusses how to select and deselect all checkboxes from all cells of gridview control using simple JavaScript.

We can use such things in User Privilege module.

Screen

JavaScript

<script type="text/javascript" language="javascript">       
        function SelectAll(chkbox) {
            var chk = document.getElementById(chkbox);
            var grid = document.getElementById("<%= gvParentGrid.ClientID %>");
            var cell;
            if (chk.checked == true) {                
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) 
                        {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {                                    
                                    cell.childNodes[j].checked = true;
                                }
                            }
                        }
                    }
                }
            }
            else {
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) 
                        {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {
                                    cell.childNodes[j].checked = false;
                                }
                            }
                        }
                    }
                }
            }           
        }
        </script> 

Page Code

<div>
    <table style="width: 100%;">            
        <tr>                
            <td>                   
                <input type="checkbox" id="chkSelectAll" 
                runat="server" onclick="SelectAll('chkSelectAll')" />
                <asp:Label ID="lblSelectAll" runat="server" 
                Text="Select All"></asp:Label>
            </td>
        </tr>
    </table>
</div>
<div>
<asp:GridView ID="gvMyGrid" runat="server" 
DataKeyNames="sysprivgrpid" Width="850px" 
        AutoGenerateColumns="False" GridLines="None" 
        OnRowDataBound="gvMyGrid_RowDataBound" BorderStyle="Solid" 
        BorderWidth="1px"  BorderColor="#DF5015">
        <HeaderStyle BackColor="#df5015" Font-Bold="true" 
        ForeColor="White" />
        <RowStyle BackColor="#E1E1E1" />
        <AlternatingRowStyle BackColor="White" />
        <HeaderStyle BackColor="#df5015" Font-Bold="true" 
        ForeColor="White" />
            <Columns>                              
                <asp:TemplateField HeaderText="Special" >
                    <ItemTemplate>                                               
                        <input type="checkbox" id="chkpSpecial" 
                        name="pSpecial" runat="server" 
                        value='<%# Eval("pSpecial") %>' Visible="false" 
                        clientidmode="Static" /> 
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="View" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpView" 
                        name="pView" runat="server" 
                        value='<%# Eval("pView") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Update" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpUpdate" 
                        name="pUpdate" runat="server" 
                        value='<%# Eval("pUpdate") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Delete" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpDelete" 
                        name="pDelete" runat="server" 
                        value='<%# Eval("pDelete") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Add" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpAdd" 
                        name="pAdd" runat="server" 
                        value='<%# Eval("pAdd") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
</div>

Hope this will help someone.