SelectAllCheckboxesInGridviewUsingJavascript

How to select all checkboxes in gridview by selecting header checkbox in asp.net using javascript

Spread the love

Hello, today I will be discussing on how to select all checkboxes in gridview by selecting header checkbox in gridview. The logic behind this is pretty simple, if the header checkbox is selected, find all the other checkboxes using javascript and set them as selected and if the header checkbox is unselected, find all the other checkboxes using javascript and set them as unselected.

Following is how your page will look:

SelectAllCheckboxesInGridviewUsingJavascript

And below mentioned is the code for doing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function selectAll(invoker) {
            // Since ASP.NET checkboxes are really HTML input elements
            //  let's get all the inputs 
            var inputElements = document.getElementsByTagName('input');
            //var inputElements = document.getElementsByClassName('checkbox');
            //alert(inputElements);
            for (var i = 0 ; i < inputElements.length ; i++) {
                var myElement = inputElements[i];
 
                // Filter through the input types looking for checkboxes
                if (myElement.type === "checkbox") {
 
                    // Use the invoker (our calling element) as the reference 
                    //  for our checkbox status
                    myElement.checked = invoker.checked;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="grd" AutoGenerateColumns="true" runat="server">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkheader" CssClass="checkbox" OnClick="selectAll(this)" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk" CssClass="checkbox" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(IsPostBack==false)
        {
            GrdBind();
        }
 
    }
 
    private void GrdBind()
    {
        SqlConnection con = new SqlConnection("Data Source=SUNNY-PC\\SQLEXPRESS;Initial Catalog=AspSkills;Integrated Security=true");
        SqlCommand cmd = new SqlCommand("select * from COUNTRY_TBL", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        grd.DataSource = ds;
        grd.DataBind();
    }
}

Leave a Reply

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