<asp:TemplateField ItemStyle-Width="5%">
<ItemTemplate>
<asp:CheckBox ID="AllItem" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:Label ID="HeaderText" runat="server" Text="Select" /><br />
<asp:CheckBox ID="AllCheckBox" AutoPostBack="true" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
jQuery(function ($) {
var allCkBoxSelector = '#<%=PageGridView.ClientID%> input[id*="AllCheckBox"]:checkbox';
var checkBoxSelector = '#<%=PageGridView.ClientID%> input[id*="AllItem"]:checkbox';
function ToggleCheckUncheckAllOptionAsNeeded() {
var totalCkboxes = $(checkBoxSelector),
checkedCheckboxes = totalCkboxes.filter(":checked"),
noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
allCkboxesAreChecked = (totalCkboxes.length === checkedCheckboxes.length);
$(allCkBoxSelector).attr('checked', allCkboxesAreChecked);
}
$(allCkBoxSelector).live('click', function () {
$(checkBoxSelector).attr('checked', $(this).is(':checked'));
ToggleCheckUncheckAllOptionAsNeeded();
});
$(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);
ToggleCheckUncheckAllOptionAsNeeded();
});