Gridview checkbox validation using JavaScript in Asp.net

Introduction

In this article i will explain check the checkbox selected status in gridview using JavaScript in Asp.net.

The following example check whether checkboxes selected in gridview or not. In this example I have taken one gridview with checkboxes and I have taken one button If user click on button without check any checkbox it rise validation.

Firstly I am created a database EmpDetail. and Now I am created a table in this database. 

Query Code

CREATE TABLE [dbo].[Emp_Info](

      [Emp_Id] [int] NULL,

      [Name] [varchar](50) NULL,

      [Salary] [int] NULL,

      [City] [varchar](50) NULL

) ON [PRIMARY]

Now Insert some Data in Emp_Info table. Then use the following procedure.

Complete Program

Checkbox_Validation.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Checkbox_Validation.aspx.cs" Inherits="Checkbox_Validation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript">

        function CheckBox_Validation()

        {

            var valid = false;

            var gdvw = document.getElementById('<%= gdview.ClientID %>');

            for (var i = 1; i < gdvw.rows.length; i++)

            {

                var value = gdvw.rows[i].getElementsByTagName('input');

                if (value != null)

                {

                    if (value[0].type == "checkbox")

                    {

                        if (value[0].checked)

                        {

                            valid = true;

                            alert("Checkbox selected successfully");

                            return true;

                        }

                    }

                }

            }

            alert("Please select atleast one checkbox");

            return false;

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <asp:GridView ID="gdview" CssClass="Gridview" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#669999"

HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="Black" HeaderStyle-BorderColor="#333300" HeaderStyle-BorderWidth="1">

        <Columns>

            <asp:TemplateField>

                <HeaderTemplate>

                    <asp:CheckBox ID="chkbox" runat="server" />         

                </HeaderTemplate>

                <ItemTemplate>

                    <asp:CheckBox ID="chkboxchild" runat="server" />

                </ItemTemplate>

            </asp:TemplateField>

            <asp:BoundField HeaderText="Emp_Id" DataField="Emp_Id" HeaderStyle-HorizontalAlign="Left" >

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>

            </asp:BoundField>

            <asp:BoundField HeaderText="Name" DataField="Name" HeaderStyle-HorizontalAlign="Left" >

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>

            </asp:BoundField>

            <asp:BoundField HeaderText="Salary" DataField="Salary" HeaderStyle-HorizontalAlign="Left" >

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>

            </asp:BoundField>

            <asp:BoundField HeaderText="City" DataField="City" HeaderStyle-HorizontalAlign="Left" >

<HeaderStyle HorizontalAlign="Left"></HeaderStyle>

            </asp:BoundField>

        </Columns>

        <EditRowStyle Font-Bold="False" Font-Italic="False" />

<HeaderStyle BackColor="#99CCFF" Font-Bold="True" ForeColor="Black" BorderColor="#663300" BorderWidth="1px"></HeaderStyle>

    </asp:GridView>

        <br />

        <asp:Button runat="server" Text="Submit" OnClientClick="javascript:CheckBox_Validation()" Font-Bold="True" Font-Italic="False" />

    </div>

    </form>

</body>

</html>

Checkbox_Validation.aspx.cs

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 Checkbox_Validation : System.Web.UI.Page

{

    SqlConnection con;

    SqlDataAdapter da;

    DataSet ds;

    protected void Page_Load(object sender, EventArgs e)

    {

        using (con = new SqlConnection("Data Source=.;Initial Catalog=EmpDetail;Integrated Security=True"))

        {

            using (da = new SqlDataAdapter("Select * from Emp_Info", con))

            {

                ds = new DataSet();

                da.Fill(ds);

                gdview.DataSource = ds.Tables[0];

                gdview.DataBind();

            }

        }

    }

}

Output 1

Click on "Submit" button without any check checkbox

Output 2

Click on "Submit" button after check checkboxes