Check uncheck all checkboxes in grid view using jquery

Introduction:                                  

In my previous article I have explained about  Select deselect all checkboxes in grid view using javascript.In this article I am going to explain the same process using jquery.

 

Explanation:

While working with grid view I got a requirement to select and deselect all checkboxes in a grid view in a single click. For this first create a table and insert some sample records in the table. I am binding the gridview through the procedure at the page load. And at the end I have two buttons which is used for select/deselect all checkboxes.

Below is the query to create table and insert some sample records.

--creating table

CREATE TABLE Employee(Eid INT IDENTITY,Empname VARCHAR(50),Designation VARCHAR(50))

--Inserting into table

INSERT INTO Employee values('Kanna','Software developer')

INSERT INTO Employee values('Dasan','Software developer')

INSERT INTO Employee values('Thirumalai','Network engineer')

--procedure for retriving data

CREATE PROC getEmployee

AS

BEGIN

SELECT * FROM Employee

END

After that add your connection string in web.config

 

<add key="mycon" value="data source=GKANNADASAN;uid=sa;pwd=kanna;

Initial Catalog=master;"/>                      

ASPX code is given below.

<div>

    <asp:GridView runat="server" ID="grdEmployee" AutoGenerateColumns="False">

        <Columns>

            <asp:TemplateField>

                <HeaderTemplate>

                    <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="javascript:SelectAllCheckboxes(this);" />

                </HeaderTemplate>

                <ItemTemplate>

                    <asp:CheckBox ID="chkSelectAdd" runat="server" />

                </ItemTemplate>

            </asp:TemplateField>

            <asp:BoundField HeaderText="Employee id" DataField="Eid" />

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

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

        </Columns>

    </asp:GridView>

</div>

 

After that add the below mentioned namespaces in code behind file.

 

using System.Data.SqlClient;

using System.Data;

using System.Configuration;

Below code is used to bind the grid view.

protected void Page_Load(object sender, EventArgs e)

{

    DataSet ds = new DataSet();

    try

    {

        string constr = ConfigurationManager.AppSettings["mycon"];

        SqlConnection con = new SqlConnection();

        SqlCommand cmd = new SqlCommand();

        con.ConnectionString = constr;

        cmd.Connection = con;

        cmd.CommandText = "getEmployee";

        cmd.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter sda = new SqlDataAdapter();

        sda.SelectCommand = cmd;

        sda.Fill(ds);

        if (ds.Tables[0] != null)

        {

            grdEmployee.DataSource=ds.Tables[0];

            grdEmployee.DataBind();

        }

    }

    catch (Exception ex)

    {

          

    }

}

 

After that in aspx page I wrote a jquery function for selecting and deselecting checkboxes. The jquery code is given below.

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

<script type="text/javascript">

    function SelectAllCheckboxes(chk) {

        $('#<%=gvProductBrow.ClientID %>').find("input:checkbox").each(function () {

            if (this != chk) {

                this.checked = chk.checked;

            }

        });

    }

</script>

Do you like this article. Then comment here or share with your friends. Or like our Facebook page. Or post your comments below

Download Source Code Here