Check All Checkboxes in GridView using JQuery

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.

 

The folllowing code snippet will help us to do the same using JQuery.

 

 <script language="javascript">
2  function SelectAllCheckboxes(chk) {
3  $('#<%=gvUsers.ClientID %>').find("input:checkbox").each(function() {
4  if (this != chk) {
5  this.checked = chk.checked; 
6  }
7  });
8 }
9  </script>

 

 

 

 1 <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">
 2  <Columns>
 3   <asp:TemplateField HeaderText="Roles">
 4      <HeaderTemplate>
 5          <asp:CheckBox ID="chkAll" onclick="javascript:SelectAllCheckboxes(this);" runat="server" />
 6      </HeaderTemplate>
 7       <ItemTemplate>
 8         <asp:CheckBox ID="chkDelete" runat="server" />
 9      </ItemTemplate>
10    </asp:TemplateField>
11  <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />
12  <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />
13  <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" /> 
14  </Columns>
15  <FooterStyle BackColor="White" ForeColor="#330099" />
16  <RowStyle BackColor="White" ForeColor="#330099" />
17  <HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />
18  </asp:GridView>

 

 

You can still modify the SelectAllCheckboxes() to have less code,

 

 function SelectAllCheckboxes(chk) {
2  $('#<%=gvUsers.ClientID %> >tbody >tr >td >input:checkbox').attr('checked', chk.checked);
3 }