Checking all checkboxes when we select the checkbox in header is one of the most common requirements in ASP.Net application.

The following article will help you to do this in JavaScript.

Select All and Highlight Selected Row

My previous code snippet Check All Checkboxes in GridView using JQuery helped us to achieve the same using JQuery. The main drawback of this approach is it will also check the checkboxes that present in other columns of the gridview as well.

The following code snippet will check for the checkbox in a particular column and checks only that. It is first column in this example.

<script language="javascript">

function SelectAllCheckboxes(chk) {

$('#<%=gvUsers.ClientID %> >tbody >tr >td:first-child > input:checkbox').attr('checked', chk.checked);

 });

}

</script>

<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">

<Columns>

  <asp:TemplateField HeaderText="Roles">

     <HeaderTemplate>

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

     </HeaderTemplate>

      <ItemTemplate>

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

     </ItemTemplate>

   </asp:TemplateField>

 <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />

 <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />

 <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />

</Columns>

<FooterStyle BackColor="White" ForeColor="#330099" />

<RowStyle BackColor="White" ForeColor="#330099" />

<HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />

</asp:GridView>

If the checkbox is in last column then,

<script language="javascript">

function SelectAllCheckboxes(chk) {

$('#<%=gvUsers.ClientID %> >tbody >tr >td:last-child > input:checkbox').attr('checked', chk.checked);

 });

}

</script>

If the checkbox is in nth column then,

<script language="javascript">

function SelectAllCheckboxes(chk) {

$('#<%=gvUsers.ClientID %> >tbody >tr >td:nth-child(n) > input:checkbox').attr('checked', chk.checked);

 });

}

</script>

In the above function, replace n with the column number.