JQuery $( returning null

Question

I am having problems with my JQuery returning null.

Here is my JQuery (which is contained in a .js)....

$(document).ready(function() {        
var chkBox = $("#gvEntryPoints input[id$='cbxIncludeAll']");        
chkBox.click(function() {                 
    $("#gvEntryPoints input[type='checkbox']").attr('checked', chkBox.is(':checked'));
});        

// To deselect CheckAll when a GridView CheckBox is unchecked        
$("#gvEntryPoints INPUT[type='checkbox']").click(function(e) {            
    if (!$(this)[0].checked) {                
        chkBox.attr("checked", false);            
    }        
});

}

It appears the chkBox never gets assigned and therefore there is never a click event that is assigned.

Here is my HTML...

<asp:GridView CssClass="GridView" ID="gvEntryPoints" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:TemplateField Visible="false">
                    <ItemStyle CssClass="GridView_Item" />
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblEntryPointListItemId" Text='<%# Eval("EntryPointListItemId") %>'/>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField Visible="false">
                    <ItemStyle CssClass="GridView_Item" />
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblEntryPointId" Text='<%# Eval("EntryPointId") %>'/>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Include">
                    <ItemStyle CssClass="GridView_Item" />
                    <HeaderTemplate>
                        <asp:CheckBox runat="server" ID="cbxIncludeAll" CssClass="label" Checked="true" Text="Include<br/>All" TextAlign="Left" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox runat="server" ID="cbxEPInclude" name="EPInclude" CssClass="EPCheckBox" Checked="true" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

My HTML lies within an .ascx. The .ascx is contained on a .aspx content page. I have the JQuery library included on the Master page (I have tried in the Head, top of the body, and bottom of the body).

Answer 1

the problem is that the checkbox will not be rendered with an id of cbxIncludeAll on the client side. It will have an ID that is generated by asp.net. like crtl_Gridview1_001_cbxIncludeAll or something like that. Take a look at the client source to see what the name is.

There is also a clientID property off of every control that you can use to get the client ID.