Check/Uncheck All GridView Checkboxes With jQuery

GridView is a very important control in ASP.NET, and at times, we are required to do the check and uncheck of all the child checkboxes with a parent checkbox. This parent checkbox is usually located inside the header of GridView. This feature can be achieved with just 2 lines of jQuery code. Let me show you how to do it.

GridView Code

First, in your GridView, you have to create a ‘Template Field’. Inside this, you have to create 2 things - ‘Header Template’ and ‘Item Template.’

Add a checkbox inside the ‘Header Template’ and give it an Id (‘rowCheckbox’). Add another checkbox inside the ‘Item Template’ and give it an Id (‘childCheckbox’).

The below GridView code shows what I mean.

<asp:GridView ID="gridView" runat="server" AllowPaging="true" PageSize="10" OnPageIndexChanging="gridView_PageIndexChanging">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="rowCheckbox" runat="server" /> </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="childCheckbox" runat="server" /> </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

C# Code where GridView is bound with Data

List<Products> products;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
        BindGridView();
}

void BindGridView()
{
    LoadData();
    gridView.DataSource = products;
    gridView.DataBind();
}
void LoadData()
    {
        products = new List<Products>();
        products.Add(new Products() { productName = "Chai", quantityPerUnit = "10 boxes x 20 bags", unitPrice = 18.0000M, unitsInStock = 39 });
        products.Add(new Products() { productName = "Chang", quantityPerUnit = "24 - 12 oz bottles", unitPrice = 19.0000M, unitsInStock = 17 });
        products.Add(new Products() { productName = "Aniseed Syrup", quantityPerUnit = "12 - 550 ml bottles", unitPrice = 10.0000M, unitsInStock = 13 });
        products.Add(new Products() { productName = "Chef Anton's Cajun Seasoning", quantityPerUnit = "48 - 6 oz jars", unitPrice = 22.0000M, unitsInStock = 52 });

        products.Add(new Products() { productName = "Chef Anton's Gumbo Mix", quantityPerUnit = "36 boxes", unitPrice = 21.3500M, unitsInStock = 0 });
        products.Add(new Products() { productName = "Grandma's Boysenberry Spread", quantityPerUnit = "12 - 8 oz jars", unitPrice = 25.0000M, unitsInStock = 120 });
        products.Add(new Products() { productName = "Uncle Bob's Organic Dried Pears", quantityPerUnit = "12 - 1 lb pkgs.", unitPrice = 30.0000M, unitsInStock = 15 });
        products.Add(new Products() { productName = "Northwoods Cranberry Sauce", quantityPerUnit = "12 - 12 oz jars", unitPrice = 40.0000M, unitsInStock = 6 });

        products.Add(new Products() { productName = "Mishi Kobe Niku", quantityPerUnit = "18 - 500 g pkgs.", unitPrice = 97.0000M, unitsInStock = 29 });
        products.Add(new Products() { productName = "Ikura", quantityPerUnit = "12 - 200 ml jars", unitPrice = 31.0000M, unitsInStock = 31 });
        products.Add(new Products() { productName = "Queso Cabrales", quantityPerUnit = "1 kg pkg.", unitPrice = 21.0000M, unitsInStock = 22 });
        products.Add(new Products() { productName = "Queso Manchego La Pastora", quantityPerUnit = "10 - 500 g pkgs.", unitPrice = 38.0000M, unitsInStock = 86 });

        products.Add(new Products() { productName = "Konbu", quantityPerUnit = "2 kg box", unitPrice = 6.0000M, unitsInStock = 24 });
        products.Add(new Products() { productName = "Tofu", quantityPerUnit = "40 - 100 g pkgs.", unitPrice = 23.2500M, unitsInStock = 35 });
        products.Add(new Products() { productName = "Genen Shouyu", quantityPerUnit = "24 - 250 ml bottles", unitPrice = 15.5000M, unitsInStock = 39 });
        products.Add(new Products() { productName = "Pavlova", quantityPerUnit = "32 - 500 g boxes", unitPrice = 17.4500M, unitsInStock = 29 });

        products.Add(new Products() { productName = "Alice Mutton", quantityPerUnit = "20 - 1 kg tins", unitPrice = 39.0000M, unitsInStock = 0 });
        products.Add(new Products() { productName = "Carnarvon Tigers", quantityPerUnit = "16 kg pkg.", unitPrice = 62.5000M, unitsInStock = 42 });
        products.Add(new Products() { productName = "Teatime Chocolate Biscuits", quantityPerUnit = "10 boxes x 12 pieces", unitPrice = 9.2000M, unitsInStock = 25 });
        products.Add(new Products() { productName = "Sir Rodney's Marmalade", quantityPerUnit = "30 gift boxes", unitPrice = 81.0000M, unitsInStock = 40 });

        products.Add(new Products() { productName = "Sir Rodney's Scones", quantityPerUnit = "24 pkgs. x 4 pieces", unitPrice = 10.0000M, unitsInStock = 3 });
        products.Add(new Products() { productName = "Gustaf's Knäckebröd", quantityPerUnit = "24 - 500 g pkgs.", unitPrice = 21.0000M, unitsInStock = 104 });
        products.Add(new Products() { productName = "Tunnbröd", quantityPerUnit = "12 - 250 g pkgs.", unitPrice = 9.0000M, unitsInStock = 61 });
        products.Add(new Products() { productName = "Guaraná Fantástica", quantityPerUnit = "12 - 355 ml cans", unitPrice = 4.5000M, unitsInStock = 20 });
        products.Add(new Products() { productName = "NuNuCa Nuß-Nougat-Creme", quantityPerUnit = "20 - 450 g glasses", unitPrice = 14.0000M, unitsInStock = 76 });
        products.Add(new Products() { productName = "Gumbär Gummibärchen", quantityPerUnit = "100 - 250 g bags", unitPrice = 31.2300M, unitsInStock = 15 });
        products.Add(new Products() { productName = "Schoggi Schokolade", quantityPerUnit = "100 - 100 g pieces", unitPrice = 43.9000M, unitsInStock = 49 });
        products.Add(new Products() { productName = "Rössle Sauerkraut", quantityPerUnit = "25 - 825 g cans", unitPrice = 45.6000M, unitsInStock = 26 });
        products.Add(new Products() { productName = "Thüringer Rostbratwurst", quantityPerUnit = "50 bags x 30 sausgs.", unitPrice = 123.7900M, unitsInStock = 0 });
        products.Add(new Products() { productName = "Nord-Ost Matjeshering", quantityPerUnit = "10 - 200 g glasses", unitPrice = 25.8900M, unitsInStock = 10 });

        products.Add(new Products() { productName = "Gorgonzola Telino", quantityPerUnit = "    12 - 100 g pkgs", unitPrice = 12.5000M, unitsInStock = 0 });
        products.Add(new Products() { productName = "Mascarpone Fabioli", quantityPerUnit = "24 - 200 g pkgs.", unitPrice = 32.0000M, unitsInStock = 9 });
        products.Add(new Products() { productName = "Geitost", quantityPerUnit = "500 g", unitPrice = 2.5000M, unitsInStock = 112 });
        products.Add(new Products() { productName = "Sasquatch Ale", quantityPerUnit = "24 - 12 oz bottles", unitPrice = 14.0000M, unitsInStock = 111 });

        products.Add(new Products() { productName = "Steeleye Stout", quantityPerUnit = "24 - 12 oz bottles", unitPrice = 18.0000M, unitsInStock = 20 });
        products.Add(new Products() { productName = "Inlagd Sill", quantityPerUnit = "24 - 250 g jars", unitPrice = 19.0000M, unitsInStock = 112 });
        products.Add(new Products() { productName = "Gravad lax", quantityPerUnit = "12 - 500 g pkgs.", unitPrice = 26.0000M, unitsInStock = 11 });
        products.Add(new Products() { productName = "Côte de Blaye", quantityPerUnit = "12 - 75 cl bottles", unitPrice = 263.5000M, unitsInStock = 17 });

        products.Add(new Products() { productName = "Chartreuse verte", quantityPerUnit = "750 cc per bottle", unitPrice = 18.0000M, unitsInStock = 69 });
        products.Add(new Products() { productName = "Boston Crab Meat", quantityPerUnit = "24 - 4 oz tins", unitPrice = 18.4000M, unitsInStock = 123 });
        products.Add(new Products() { productName = "Jack's New England Clam Chowder", quantityPerUnit = "12 - 12 oz cans", unitPrice = 9.6500M, unitsInStock = 85 });
        products.Add(new Products() { productName = "Singaporean Hokkien Fried Mee", quantityPerUnit = "32 - 1 kg pkgs.", unitPrice = 14.0000M, unitsInStock = 26 });

        products.Add(new Products() { productName = "Ipoh Coffee", quantityPerUnit = "16 - 500 g tins", unitPrice = 46.0000M, unitsInStock = 17 });
        products.Add(new Products() { productName = "Gula Malacca", quantityPerUnit = "20 - 2 kg bags", unitPrice = 19.4500M, unitsInStock = 27 });
        products.Add(new Products() { productName = "Rogede sild", quantityPerUnit = "Rogede sild", unitPrice = 9.5000M, unitsInStock = 5 });
        products.Add(new Products() { productName = "Spegesild", quantityPerUnit = "4 - 450 g glasses", unitPrice = 12.0000M, unitsInStock = 95 });

        products.Add(new Products() { productName = "Zaanse koeken", quantityPerUnit = "10 - 4 oz boxes", unitPrice = 9.5000M, unitsInStock = 36 });
        products.Add(new Products() { productName = "Chocolade", quantityPerUnit = "10 pkgs.", unitPrice = 12.7500M, unitsInStock = 15 });
        products.Add(new Products() { productName = "Maxilaku", quantityPerUnit = "24 - 50 g pkgs.", unitPrice = 20.0000M, unitsInStock = 10 });
        products.Add(new Products() { productName = "Valkoinen suklaa", quantityPerUnit = "12 - 100 g bars", unitPrice = 16.2500M, unitsInStock = 65 });

        products.Add(new Products() { productName = "Manjimup Dried Apples", quantityPerUnit = "50 - 300 g pkgs.", unitPrice = 53.0000M, unitsInStock = 20 });
        products.Add(new Products() { productName = "Filo Mix", quantityPerUnit = "16 - 2 kg boxes", unitPrice = 7.0000M, unitsInStock = 38 });
        products.Add(new Products() { productName = "Perth Pasties", quantityPerUnit = "48 pieces", unitPrice = 32.8000M, unitsInStock = 0 });
        products.Add(new Products() { productName = "Tourtière", quantityPerUnit = "16 pies", unitPrice = 7.4500M, unitsInStock = 21 });

        products.Add(new Products() { productName = "Pâté chinois", quantityPerUnit = "24 boxes x 2 pies", unitPrice = 24.0000M, unitsInStock = 115 });
        products.Add(new Products() { productName = "Gnocchi di nonna Alice", quantityPerUnit = "24 - 250 g pkgs.", unitPrice = 38.0000M, unitsInStock = 21 });
        products.Add(new Products() { productName = "Ravioli Angelo", quantityPerUnit = "24 - 250 g pkgs.", unitPrice = 19.5000M, unitsInStock = 36 });
        products.Add(new Products() { productName = "Escargots de Bourgogne", quantityPerUnit = "24 pieces", unitPrice = 13.2500M, unitsInStock = 62 });

        products.Add(new Products() { productName = "Raclette Courdavault", quantityPerUnit = "5 kg pkg.", unitPrice = 55.0000M, unitsInStock = 79 });
        products.Add(new Products() { productName = "Camembert Pierrot", quantityPerUnit = "15 - 300 g rounds", unitPrice = 34.0000M, unitsInStock = 19 });
        products.Add(new Products() { productName = "Sirop d'érable", quantityPerUnit = "24 - 500 ml bottles", unitPrice = 28.5000M, unitsInStock = 113 });
        products.Add(new Products() { productName = "Tarte au sucre", quantityPerUnit = "48 pies", unitPrice = 49.3000M, unitsInStock = 17 });

        products.Add(new Products() { productName = "Vegie-spread", quantityPerUnit = "15 - 625 g jars", unitPrice = 43.9000M, unitsInStock = 24 });
        products.Add(new Products() { productName = "Wimmers gute Semmelknödel", quantityPerUnit = "20 bags x 4 pieces", unitPrice = 33.2500M, unitsInStock = 22 });
        products.Add(new Products() { productName = "Louisiana Fiery Hot Pepper Sauce", quantityPerUnit = "32 - 8 oz bottles", unitPrice = 21.0500M, unitsInStock = 76 });
        products.Add(new Products() { productName = "Louisiana Hot Spiced Okra", quantityPerUnit = "24 - 8 oz jars", unitPrice = 17.0000M, unitsInStock = 4 });

        products.Add(new Products() { productName = "Laughing Lumberjack Lager", quantityPerUnit = "24 - 12 oz bottles", unitPrice = 14.0000M, unitsInStock = 52 });
        products.Add(new Products() { productName = "Scottish Longbreads", quantityPerUnit = "10 boxes x 8 pieces", unitPrice = 12.5000M, unitsInStock = 6 });
        products.Add(new Products() { productName = "Gudbrandsdalsost", quantityPerUnit = "10 kg pkg.", unitPrice = 36.0000M, unitsInStock = 26 });
        products.Add(new Products() { productName = "Outback Lager", quantityPerUnit = "24 - 355 ml bottles", unitPrice = 15.0000M, unitsInStock = 15 });

        products.Add(new Products() { productName = "Flotemysost", quantityPerUnit = "10 - 500 g pkgs.", unitPrice = 21.5000M, unitsInStock = 26 });
        products.Add(new Products() { productName = "Mozzarella di Giovanni", quantityPerUnit = "24 - 200 g pkgs.", unitPrice = 34.8000M, unitsInStock = 14 });
        products.Add(new Products() { productName = "Röd Kaviar", quantityPerUnit = "24 - 150 g jars", unitPrice = 15.0000M, unitsInStock = 101 });
        products.Add(new Products() { productName = "Longlife Tofu", quantityPerUnit = "5 kg pkg.", unitPrice = 10.0000M, unitsInStock = 4 });

        products.Add(new Products() { productName = "Rhönbräu Klosterbier   ", quantityPerUnit = "24 - 0.5 l bottles", unitPrice = 7.7500M, unitsInStock = 125 });
        products.Add(new Products() { productName = "Lakkalikööri", quantityPerUnit = "500 ml", unitPrice = 18.0000M, unitsInStock = 57 });
        products.Add(new Products() { productName = "Original Frankfurter grüne Soße", quantityPerUnit = "12 boxes", unitPrice = 13.0000M, unitsInStock = 32 });
    }
class Products
{
    public string productName { get; set; }
    public string quantityPerUnit { get; set; }
    public decimal unitPrice { get; set; }
    public int unitsInStock { get; set; }
}

protected void gridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gridView.PageIndex = e.NewPageIndex;
    BindGridView();
}

Here, I am binding GridView from a Class data instead of Datatable. You can understand how it is done by reading - How to Bind GridView with Class instead of DataTable.

jQuery Code

Now, add the jQuery Check Checkbox code that will check all the Child Checkboxes that have id (‘childCheckbox’) when the Parent Checkbox (with id ‘rowCheckbox’) is either checked or unchecked.

Add the jQuery code to your page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("[id *= rowCheckbox]").click(function () {
            checkChildCheckbox(this);
        });

        function checkChildCheckbox(rowCheckbox) {
            $("[id *= childCheckbox]").prop("checked", $(rowCheckbox).prop("checked"));
        }
    });
</script>

The 2 lines of jQuery doing this magic are -

checkChildCheckbox(this);
$("[id *= childCheckbox]").prop("checked", $(rowCheckbox).prop("checked"));

Modifying the Code

The above code will work perfectly; but if the GridView has paging, then you will find your checkboxes not retaining their values on page navigation.

To make the Check/Uncheck feature in GridView to work, you have to store the parent checkbox’s selection inside a hidden field.

So first, create a hidden field in your page.

<input type="hidden" id="checkBoxHidden" runat="server"/>

Then, modify the jQuery code with the following new one.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var booleanValue = ($("[id *= checkBoxHidden]").val() === "true");
        $("[id *= rowCheckbox]").prop("checked", booleanValue);
        $("[id *= childCheckbox]").prop("checked", booleanValue);

        $("[id *= rowCheckbox]").click(function () {
            checkChildCheckbox(this);
        });

        function checkChildCheckbox(rowCheckbox) {
            $("[id *= childCheckbox]").prop("checked", $(rowCheckbox).prop("checked"));
            $("[id *= checkBoxHidden]").val($(rowCheckbox).prop("checked"));
        }
    });
</script>

So now, the Check/Uncheck feature will also work on GridView paging.

You can see the demo of this feature here - DEMO