Hi Friends,in this article i will explain about :How to check all checkboxes except one checkbox || jQuery :not() Selector Example.
I already explained in the previous artilces about How to change image opacity and Zoom on mouseover using jQuery, Jquery:How to add events in gridview using Jquery || Handling GridView event(RowCommand) and Binding and Sorting Grid in ASP.NET MVC using Jquery
Before going to How to check all checkboxes except one checkbox we have to know about jQuery :not() Selector.Because using not() selector we implement ow to check all checkboxes except one checkbox.
jQuery :not() Selector:
I already explained in the previous artilces about How to change image opacity and Zoom on mouseover using jQuery, Jquery:How to add events in gridview using Jquery || Handling GridView event(RowCommand) and Binding and Sorting Grid in ASP.NET MVC using Jquery
Before going to How to check all checkboxes except one checkbox we have to know about jQuery :not() Selector.Because using not() selector we implement ow to check all checkboxes except one checkbox.
jQuery :not() Selector:
The :not() selector selects
all elements except the specified element.
This
is mostly used together with another selector to select everything except the
specified element in a group.
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery-How
to check all checkboxes except one checkbox || jQuery :not() Selector
Example</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="GridDiv">
<asp:GridView ID="gv" runat="server" BackColor="White" BorderColor="#CC9966" BorderStyle="Solid"
BorderWidth="1px" CellPadding="4" Font-Names="Georgia" Font-Size="Small" Width="375px">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox"
id="HeaderLevelCheckbox"
onclick="SelectUnselectAll(this.checked);"
/>Select
All
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox"
id="HeaderLevelCheckbox"
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan" />
<AlternatingRowStyle BackColor="#E6E6E1" />
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
In C#:
using System.Data;
public partial class GetGridCellData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}
protected void BindGridData()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("EMP
ID"), new DataColumn("EMP
Name") });
dt.Rows.Add("1", "Kishore");
dt.Rows.Add("2", "Satya");
dt.Rows.Add("3", "Satyam");
dt.Rows.Add("4", "Raghava");
dt.Rows.Add("5", "Nag");
gv.DataSource = dt;
gv.DataBind();
}
}
|
In VB.NET:
Imports System.Data
Partial Public Class GetGridCellData
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not IsPostBack Then
BindGridData()
End If
End Sub
Protected Sub BindGridData()
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(1) {New DataColumn("EMP
ID"), New DataColumn("EMP
Name")})
dt.Rows.Add("1", "Kishore")
dt.Rows.Add("2", "Satya")
dt.Rows.Add("3", "Satyam")
dt.Rows.Add("4", "Raghava")
dt.Rows.Add("5", "Nag")
gv.DataSource = dt
gv_.DataBind()
End Sub
End Class
|
The below code select all the checkboxes in GridView.If we select all the RowLevel checkboxes then the HeaderLevelCheckbox should be checked.But
<script type="text/javascript"
language="javascript">
function
SelectUnselectAll(event) {
if
(event == true) {
$("#GridDiv
input").attr("checked",
"checked");
}
else
{
$("#GridDiv
input").removeAttr("checked");
}
$("#GridDiv
input").click(function () {
if
($("[id*=GridDiv] input:checked").length
== $("[id*=GridDiv] input:checkbox").length)
{
$("[id*=HeaderLevelCheckbox]").attr("checked", "checked");
} else
{
$("[id*=HeaderLevelCheckbox]").removeAttr("checked");
}
});
}
</script>
|
The below figure shows if we select all the RowLevel checkboxes then the HeaderLevelCheckbox will not checked.
So,for this i used the
<script type="text/javascript"
language="javascript">
function
SelectUnselectAll(event) {
if
(event == true) {
$("#GridDiv
input").attr("checked",
"checked");
}
else
{
$("#GridDiv
input").removeAttr("checked");
}
$("#GridDiv
input").click(function () {
if
($("[id*=GridDiv] input:checked").not('#HeaderLevelCheckbox').length == $("[id*=GridDiv]
input:checkbox:not('#HeaderLevelCheckbox')").length) {
$("[id*=HeaderLevelCheckbox]").attr("checked", "checked");
} else
{
$("[id*=HeaderLevelCheckbox]").removeAttr("checked");
}
});
}
</script>
|
The below figure shows if we select all the RowLevel checkboxes then the HeaderLevel Checkbox should be checked.
No comments:
Post a Comment