Consider a GridView with a checkbox column. We want to select all checkboxes or clear all checkboxes within this column using a Select All
checkbox in the header row.
GridView Definition
The GridView has a template column. Template defines the header row as well as the item row. In the header row, we have the Select All
checkbox. And within in the item row, we have a checkbox to select an item.
<asp:GridView ID="gvwMain" runat="server" DataSourceID="xmlMain" AutoGenerateColumns="false"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="chkSelectAll" runat="server" ClientIDMode="Static" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chkSelect" runat="server" Value='<%# XPath("ID") %>' /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Full Name" ItemStyle-Width="200"> <ItemTemplate> <%# XPath("FullName") %> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:XmlDataSource ID="xmlMain" runat="server" XPath="/People/Person"> <Data> <People> <Person> <ID>1</ID> <FullName>Vijay</FullName> </Person> <Person> <ID>2</ID> <FullName>Ravi</FullName> </Person> </People> </Data> </asp:XmlDataSource>
The GridView will render as below:
JQuery for checkbox events
We will use jQuery for Select All
function. Check Select All
checkbox: Checks all checkboxes in the column. Clear Select All
checkbox: Clears all checkboxes in the column. The reverse should also work. Check all checkboxes in the column: Checks Select All
checkbox. Clear all checkboxes in the column: Clears Select All
checkbox.
$('#chkSelectAll').click( function () { if ($('#chkSelectAll').is(':checked')) { $('input:checkbox[name$=chkSelect]').each( function () { $(this).attr('checked', 'checked'); }); } else { $('input:checkbox[name$=chkSelect]').each( function () { $(this).removeAttr('checked'); }); } }); $('input:checkbox[name$=chkSelect]').click( function () { if (!$(this).is(':checked')) { $('#chkSelectAll').removeAttr('checked'); } else { if ($('input:checkbox[name$=chkSelect]').length == $('input:checkbox[name$=chkSelect]:checked').length) { $('#chkSelectAll').attr('checked', 'checked'); } } });
The selector for Select All
checkbox is #chkSelectAll
. For individual checkboxes in the checkbox column, the selector is input:checkbox[name$=chkSelect]
. The previous selector picks all checkboxes with name ending with chkSelect
. To check a checkbox, add the checked
attribute. To clear a checkbox, remove the checked
attribute.
With jQuery, client side event handling is simple for ASP.NET controls.