Click here to Skip to main content
Click here to Skip to main content

Select/Deselect All Checkboxes in gridview using JavaScript

, 26 Sep 2013
Rate this:
Please Sign up or sign in to vote.
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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

ats_ATISH

India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmembervezo1114-Jul-14 7:10 
GeneralMy vote of 1 Pinmembershabarnadh.vempati29-Sep-13 19:26 
GeneralRe: My vote of 1 Pinmvpadriancs29-Sep-13 23:37 
Questionmmm not sure about this PinmvpSacha Barber26-Sep-13 23:54 
AnswerRe: mmm not sure about this Pinmvpadriancs29-Sep-13 23:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 26 Sep 2013
Article Copyright 2013 by ats_ATISH
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid