Monday, September 12, 2011

Check/Uncheck GridView Rows using a Checkbox in JavaScript ?

Posted by Rahul Kharde at 9:40 PM

Many times you want to check/Uncheck checkboxes within a GridView control using JavaScript.
In this article a GridView control is used. Inside the GridView control there are 2 fields. One template field and other are bound fields to display some book data.

Inside the TemplateField a CheckBox control is placed in the HeaderTemplate and ItemTemplate in GridView


Add this JavaScript in the page’s head section
<script language="javascript" type="text/javascript">
        function SelectAll(oCheckbox) {
            var GridView1 = document.getElementById("<%=GridView1.ClientID %>");
            for (i = 1; i < GridView1.rows.length; i++) {
                GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = oCheckbox.checked;


I have used a TemplateField inside the GridView and put a CheckBox in the ItemTemplate as well as another CheckBox in the HeaderTemplate of the TemplateField. On checkbox in header call the JavaScript function on click event.
  <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#CC9966"
        BorderStyle="None" BorderWidth="1px" CellPadding="4" AutoGenerateColumns="False">
        <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
        <RowStyle BackColor="White" ForeColor="#330099" />
                    <asp:CheckBox ID="CheckBox2" runat="server" onclick="javascript:SelectAll(this)" />
                    <asp:CheckBox ID="CheckBox1" runat="server" />
            <asp:BoundField DataField="Book" HeaderText="Book" />
        <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />

Code Behind

Create a Temporary Dataset which is containing the book names Column bind to Gridview
  protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
                DataSet ds = new DataSet();

                for (int i = 0; i < 5; i++)
                    DataRow dr = ds.Tables[0].NewRow();
                    switch (i)
                        case 0: dr["Book"] = "ASP.Net"; break;
                        case 1: dr["Book"] = "SQL"; break;
                        case 2: dr["Book"] = "HTML"; break;
                        case 3: dr["Book"] = "JavaScript"; break;
                        case 4: dr["Book"] = "C#"; break;
                GridView1.DataSource = ds.Tables[0];


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it:



Gadwin Co Inger on November 3, 2017 at 6:47 AM said...

This is an amazing blog,it gives very helpful messages to us.Besides that Wisen has established as Best Dot Net Training in Chennai. or learn thru ASP.NET Online Training . Nowadays Dot Net has tons of job opportunities on various vertical industry.

Have any question? Feel Free To Post Below:


Popular Posts

Recent Comments

© 2011. All Rights Reserved | Help to understand .Net | Template by Blogger Widgets

Home | About | Top