Selecting all checkboxes by selecting the checkbox in the header of the gridview is a common operation in ASP.NET applications. We could do the same thing but writing less code and giving less effort by using JQuery.
The following code is used to perform the SelectAll / DeSelectAll function.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function SelectAllCheckboxes(chk) { $('#<%=gvProductBrow.ClientID %>').find("input:checkbox").each(function() { if (this != chk) { this.checked = chk.checked; } }); } </script>
You can also modify the function SelectAllCheckboxes() to have less code
function SelectAllCheckboxes(chk) { $('#<%=gvProductBrow.ClientID %> >tbody >tr >td >input:checkbox').attr('checked', chk.checked); } - This is the design of the GridView in the aspx page. Here we need to call the above function in the onclick event of the header checkbox inside the Gridview. <asp:GridView runat="server" ID="gvProductBrow" AutoGenerateColumns="False" DataKeyNames="merchant_id, product_id"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="chkSelectAll" runat="server" Text="" onclick="javascript:SelectAllCheckboxes(this);" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chkSelectAdd" runat="server" /> </ItemTemplate> </asp:TemplateField> <!-- some more columns here --> </Columns> </asp:GridView>