CODEDIGEST
Home » CodeDigest
Search
 

Technologies
 

Check All Checkboxes in GridView using JQuery in Asp.Net
Submitted By Satheesh Babu B
On 12/16/2008 7:26:12 AM
Tags: asp.net,CodeDigest,JQuery  

Check All Checkboxes in GridView using JQuery in Asp.Net

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

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

<script language="javascript">

function SelectAllCheckboxes(chk) {
 $('#<%=gvUsers.ClientID %>').find("input:checkbox").each(function() {
 if (this != chk) {
 this.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>

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


function SelectAllCheckboxes(chk) {

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

 

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!

Recent Codes
  • View All Codes..