Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Check/Uncheck checkboxes in GridView using JavaScript

0.00/5 (No votes)
4 Feb 2010 1  
The question regarding how to check/uncheck CheckBoxes within a GridView control using JavaScript has been asked many times. Here is a quick

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

The question regarding how to check/uncheck CheckBoxes within a GridView control using JavaScript has been asked many times. Here is a quick reference you can follow.

First we have the .aspx markup.

<script type="text/javascript">

    function SelectAll(id) {

        var frm = document.forms[0];

        for (i=0;i<frm.elements.length;i++) {

            if (frm.elements[i].type == "checkbox") {

                frm.elements[i].checked = document.getElementById(id).checked;

            }

        }

    } 

</script>

<!-- assuming that SqlDataSource1 is the datasource for my GridView -->

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Width="400px">

    <Columns>

        <asp:TemplateField>

            <AlternatingItemTemplate>

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

            </AlternatingItemTemplate>

            <ItemTemplate>

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

            </ItemTemplate>

            <HeaderTemplate>

                <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" />

            </HeaderTemplate>

            <HeaderStyle HorizontalAlign="Left" />

            <ItemStyle HorizontalAlign="Left" />

        </asp:TemplateField>

    </Columns>

</asp:GridView>

Next we have the code-behind in both VB and C#

VB

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

    If (e.Row.RowType = DataControlRowType.Header) Then

        'adding an attribute for onclick event on the check box in the header

        'and passing the ClientID of the Select All checkbox

        DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).Attributes.Add("onclick", "javascript:SelectAll('" & _

            DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).ClientID & "')")

    End If

End Sub

C#

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e) {

    if (e.Row.RowType == DataControlRowType.Header) {

        //adding an attribute for onclick event on the check box in the header

        //and passing the ClientID of the Select All checkbox

        ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");

    }

}

The example above is fantastic, but there are a couple things that could be improved.

  1. The JavaScript Pseudo Protocol (Javascript:your method here) should be avoided, it's a fragment from the old Netscape days. Today there are better alternatives
  2. In this case we probably don't need the server-side portion altogether.

An excerpt about the JavaScript Pseudo Protocol:

"The javascript: pseudo-protocol should not be used in event handlers like onclick. It should only be used in attributes that contain a URL, for example in the href attribute of <a> elements and the action attribute of <form> elements. You can also use it to make bookmarlets." - Common JavaScript Mistakes

Another solution the .aspx markup: 

<script type="text/javascript">

    // Let's use a lowercase function name to keep with JavaScript conventions

    function selectAll(invoker) {

        // Since ASP.NET checkboxes are really HTML input elements

        //  let's get all the inputs

        var inputElements = document.getElementsByTagName('input');

 

        for (var i = 0 ; i < inputElements.length ; i++) {

            var myElement = inputElements[i];

 

            // Filter through the input types looking for checkboxes

            if (myElement.type === "checkbox") {

 

               // Use the invoker (our calling element) as the reference 

               //  for our checkbox status

                myElement.checked = invoker.checked;

            }

        }

    } 

</script>

 

<!-- assuming that SqlDataSource1 is the datasource for my GridView -->

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">

    <Columns>

        <asp:TemplateField>

            <AlternatingItemTemplate>

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

            </AlternatingItemTemplate>

            <ItemTemplate>

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

            </ItemTemplate>

            <HeaderTemplate>

                <asp:CheckBox ID="cbSelectAll" runat="server" Text="Select All" OnClick="selectAll(this)" />

            </HeaderTemplate>

            <HeaderStyle HorizontalAlign="Left" />

            <ItemStyle HorizontalAlign="Left" />

        </asp:TemplateField>

    </Columns>

</asp:GridView>

 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here