Selecting CheckBoxes Inside GridView Using JQuery Library

There are several articles on GridViewGuy which demonstrates how to select the checkboxes inside the GridView control. In this article we will see how to use the power of JQuery to perform the same action.

Introduction:

Resources:

Let’s first check out some of the resources which talks about selecting checkboxes inside the GridView control.

Selecting CheckBoxes Inside GridView With a Twist

VIDEO: Selecting CheckBoxes Inside GridView

Now, let’s see the JQuery approach.

Populating the GridView Control:

The first task is to populate the GridView control. For this article we will use the Northwind database “Categories” table. Check out the following code:

private void BindData()
        {
            using(NorthwindDataContext dc = new NorthwindDataContext())
            {
                gvCategories.DataSource = from c in dc.Categories
                                          select c;
                gvCategories.DataBind();
            }
        }

And here is the HTML for the GridView control.

<asp:GridView ID="gvCategories" runat="server">

    <Columns>

    <asp:TemplateField>

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

    <ItemTemplate>
    <input type="checkbox" />
    </ItemTemplate>
    </asp:TemplateField>

    </Columns>

    </asp:GridView>

JQuery Code for Selecting And Un-Selecting CheckBoxes:

The next step is to attach the events to the parent checkbox which is contained in the header template of the GridView control. Here is the complete code:

$(document).ready(function()
{
   $("#chkAll").click(function()
   {
        this.checked = !(this.checked == true);

        $("#gvCategories input:checkbox").attr("checked",function()
        {
            this.checked = !(this.checked == true);
        });

   });

});

</script>

That’s the complete script for selecting and un-selecting the checkboxes from the GridView control. The document.ready event is fired when the document object model has been rendered. The click event is attached to the parent checkbox named “chkAll”. After that we used the JQuery powerful syntax to find all the checkboxes inside the container “gvCategories” using the following syntax.

$("#gvCategories input:checkbox").attr("checked",function()
        {
            this.checked = !(this.checked == true);
        });

The following line alters between the check state and un-check state.

this.checked = !(this.checked == true);

So, there you have it in few lines of code you can check and uncheck the checkboxes inside the GridView control.

Conclusion:

In this article we demonstrated how to check and uncheck checkboxes inside the GridView control using the JQuery library.