Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
Print
(untagged)

Select/Deselect All Checkboxes in gridview using JavaScript

0.00/5 (No votes)
26 Sep 2013 1  
How to 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

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

HTML
<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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here