If i click on the TD the it will change the back ground color to green and checked the checkbox also and if click the same td its backgound color will back to its original color and the check box will be un checked.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=GridView1.ClientID%> tr:has(td)").hover(function (e) {
$(this).css("cursor", "pointer");
});
$("#<%=GridView1.ClientID%> tr:has(td)").click(function (e) {
var selTD = $(e.target).closest("td");
var $target = $(e.target);
if (!$target.is('input:checkbox')) {
$(this).find('input:checkbox').each(function () {
if (this.checked) {
this.checked = false;
$target.css("background-color", "#fff");
}
else {
this.checked = true;
$target.css("background-color", "green");
}
})
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False"
CellPadding="7">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%# Eval("Country") %>
<input id="Checkbox1" type="checkbox" value='<%# Eval("Country") %>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] {
new DataColumn("Country",typeof(string)) });
dt.Rows.Add("United States");
dt.Rows.Add("India");
dt.Rows.Add("France");
dt.Rows.Add("Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Image:
Thank You.