ASP.NET Gridview : Check and uncheck checkboxes using Jquery

In this article I am going to explain how to check uncheck OR select/deselect checkboxes in asp.net gridview control using Jquery.

In the previous article I have explained how to Check and uncheck all records orshowing rows using checkbox control in Gridview asp.net using Javascript, howto fill dropdownlist with months name using System.Globalization in asp.netusing C# and vb.net and how to generate QR code image using Google Chart API inasp.net.

Description:

Check and uncheck the entire checkboxes showing inside Gridview. A checkbox is placed inside headertemplate in Gridview to select and deselect checkboxes.

Implementation:

Add the below given Jquery code before closing the head section of webform.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>

    $(document).ready(function () {

        var CheckAll = $("#chkAll").click(function () {

            if (this.checked) {

                $('.chk').attr('checked', this.checked);

            }

            else {

                $('.chk').attr('checked', this.checked = false);

            }

        });

        $(".chk").click(function () {

            if ($(".chk").length == $(".chk:checked").length) {

                $("#chkAll").attr("checked", "checked");

            } else {

                $("#chkAll").removeAttr("checked");

            }

        });

    });

    </script>

HTML Markup:

<fieldset style="width:30%">

    <legend>Select deselect all checkboxes Example</legend>

     <asp:GridView ID="grdmovie" runat="server" AllowPaging="true" AutoGenerateColumns="false">

       <Columns>

        <asp:TemplateField HeaderText="CheckAll">

<HeaderTemplate>

<input type="checkbox" id="chkAll"/>

</HeaderTemplate>

<ItemTemplate>

<input type="checkbox" class="chk"/>

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField = "Name" HeaderText = "Movie Name" />

<asp:BoundField DataField = "Genre" HeaderText = "Genre" />

<asp:BoundField DataField = "Budget" HeaderText = "Budget (In Cr.)"/>

        </Columns>

        </asp:GridView>   

    </fieldset>

Import the namespace:

C# code:

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

VB.net Code:

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

Bind the Gridview

Create a method to bind Gridview and call it on page load.

C# code:

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            BindGrid();

        }

    }

    public void BindGrid()

    {

        try

        {

            SqlCommand cmd = new SqlCommand("select * from Tb_Movie", con);

            con.Open();

            SqlDataAdapter adp = new SqlDataAdapter(cmd);

            DataTable dt = new DataTable();

            adp.Fill(dt);

            if (dt.Rows.Count > 0)

            {

                grdmovie.DataSource = dt;

                grdmovie.DataBind();

            }          

        }

        catch (Exception ex)

        {

        }

    }

VB.net Code:

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

        If Not IsPostBack Then

            BindGrid()

        End If

    End Sub

    Public Sub BindGrid()

        Try

            Dim cmd As New SqlCommand("select * from Tb_Movie", con)

            con.Open()

            Dim adp As New SqlDataAdapter(cmd)

            Dim dt As New DataTable()

            adp.Fill(dt)

            If dt.Rows.Count > 0 Then

                grdmovie.DataSource = dt

                grdmovie.DataBind()

            End If

        Catch ex As Exception

        End Try

    End Sub