Checkbox with Header in Gridview using jquery

<script type="text/ecmascript">
        $(document).ready(function () {
            $("#<%=grdBanner.ClientID%> input[id*='chkChild']:checkbox").click(function () {
                //Get number of checkboxes in list either checked or not checked
                var totalCheckboxes = $("#<%=grdBanner.ClientID%> input[id*='chkChild']:checkbox").size();
                //Get number of checked checkboxes in list
                var checkedCheckboxes = $("#<%=grdBanner.ClientID%> input[id*='chkChild']:checkbox:checked").size();
                //Check / Uncheck top checkbox if all the checked boxes in list are checked
                $("#<%=grdBanner.ClientID%> input[id*='chkAll']:checkbox").attr('checked', totalCheckboxes == checkedCheckboxes);
            });
            $("#<%=grdBanner.ClientID%> input[id*='chkAll']:checkbox").click(function () {
                //Check/uncheck all checkboxes in list according to main checkbox
                $("#<%=grdBanner.ClientID%> input[id*='chkChild']:checkbox").attr('checked', $(this).is(':checked'));
            });
        });
    </script>

<asp:TemplateField>
                            <HeaderTemplate>
                                <asp:CheckBox runat="server" ID="chkAll" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="chkChild" />
                            </ItemTemplate>
                        </asp:TemplateField>