Wednesday, 23 January 2013 13:54

how to check/uncheck checkboxes in gridview using jquery

Written by 
Rate this item
(0 votes)

the following codes will help you to implement check all
or uncheck all capability in the gridview.in that case
when header check box checked all items check box will
be checked and vice versa.

here are the header and item checkbox in the gridview -

<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();
});

Read 2925 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments