Selecting all checkboxes in GridView column using jQuery

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:

SelectAllGridView

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.

Related Posts

Leave a Reply

Your email address will not be published.