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.
- 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
- 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>
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.