Categories
Asp, Asp.net

How to Check Uncheck All Checkboxes in GridView Using jQuery

How to Check Uncheck All Checkboxes in GridView Using jQuery

In this post we will learn How to Check Uncheck All Checkboxes in GridView Using jQuery. Eariler we have learnt How to Highlight GridView Row on Mouseover Using CSS in Asp.Net, Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET. Here we have used jQuery for this.

Design:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to Check Uncheck All Checkboxes in GridView Using jQuery</title>

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">

    function SelectAllCheckboxes(chk) {
        $('#<%=gv.ClientID %>').find("input:checkbox").each(function () {
            if (this != chk) {
                this.checked = chk.checked;
            }
        });
    }
</script>
<style type="text/css">

body
 {
 width: 980px;
 margin: 0px auto;
 text-align: center;
 padding-top: 50px;
 font-size: 20px;
 }
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>How to Check Uncheck All Checkboxes in GridView Using jQuery</h2>
<div>
<asp:GridView ID="gv" runat="server" Width="100%" AutoGenerateColumns="false">
<Columns>

<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" Text="Check/Uncheck All" onclick="javascript:SelectAllCheckboxes(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkSelectAdd" runat="server" />
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="UID">
<ItemTemplate><asp:Label ID="uidn" runat="server" Text='<%#Eval("uid") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="UserName">
<ItemTemplate><asp:Label ID="uname" runat="server" Text='<%#Eval("username") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="User Email">
<ItemTemplate><asp:Label ID="uemail" runat="server" Text='<%#Eval("uemail") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>    



<br /><br />

All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> | Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</form>
</body>
</html>

Code:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    String strcon=ConfigurationManager.ConnectionStrings["connnn"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            binddata();
        }
    }
    public void binddata()
    {
        SqlConnection con = new SqlConnection(strcon);
        try
        {
            con.Open();
        }
        catch { }
        string str = "select top(5) * from users";
        SqlCommand cmd = new SqlCommand(str, con);
        SqlDataReader reader;
        reader = cmd.ExecuteReader();
        gv.DataSource = reader;
        gv.DataBind();
        con.Close();
    }
}

demo