Checkbox in Datagrid header ClientID (JQuery)

Question

Within a masterpage I have a standard DataGrid:

  <asp:DataGrid ID="dgMyGrid" runat="server" AutoGenerateColumns="false">
            <Columns>
            <asp:TemplateColumn>
            <HeaderTemplate>
            <asp:CheckBox CssClass="Checker" ID="cbSelectAll" runat="server" />
            </HeaderTemplate>
            <ItemTemplate>
            <asp:CheckBox ID="cbSelect" runat="server" />
            </ItemTemplate>
            </asp:TemplateColumn>
            </Columns>
  </asp:DataGrid>

Have the following jQuery that makes the header checkbox select all:

$(document).ready(function() {
$("#ctl00_ContentPlaceHolder1_dgMyGrid_ctl01_cbSelectAll").click(function() {
 $("#<%=dgID %> :checkbox").each(function(i)
 {
 this.checked = $("#ctl00_ContentPlaceHolder1_dgMyGrid_ctl01_cbSelectAll").is(":checked")
 });
 });
});

this works, but it's a bit ugly - I cant get the client ID for the header checkbox with
<%=cbSelectAll.ClientID%> (as I have done for the datagrid) Possibly because the javascript is rendered before that control. Is there a more elegant way for me to get the clientID of my checkbox out of the datagrid? I think it Would be better if I didnt hardcode the clientID like this.

Apologies if the answer to this is obvious, it's my first day trying jQuery! :)

Answer 1

Why not just reference the class of the checkbox 'cbSelectAll'.

<asp:CheckBox CssClass="Checker" ID="cbSelectAll" runat="server" />


$("#<%=dgID %> :checkbox").each(function(i)
{ 
    this.checked = $(".Checker").is(":checked");
});

If the class 'Checker' is used for multiple controls you can always assign a unique class.

<asp:CheckBox CssClass="Checker cbSelectAll" ID="cbSelectAll" runat="server" />

$("#<%=dgID %> :checkbox").each(function(i)
{ 
    this.checked = $(".cbSelectAll").is(":checked");
});

Answer 2

This code to find your check box

 protected static Control FindControl(Control control, string controlId)
    {
        Control result;
        foreach (Control ctrl in control.Controls)
        {
            if (ctrl.ID == controlId)
            {
                result = ctrl;
                return result;
            }
            if (ctrl.Controls.Count != 0)
            {
                result = FindControl(ctrl, controlId);
                if (result != null)
                {
                    return result;
                }
            }
        }
        return null;
    }

And now you can use on aspx page:

<%= FindControl(dgMyGrid, "cbSelectAll").ClientID%>