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