Thursday, 12 June 2014

jQuery:How to check all checkboxes except one checkbox || jQuery :not() Selector Example

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 jQueryJquery: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 ObjectByVal 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 HeaderLevelCheckbox  checkbox also inside GridDiv div.So,we have to except HeaderLevelCheckbox checkbox.

<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 :not() Selector in below code.
<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

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.