Выберите все флажки в виде сетки

Question

У меня есть следующий вид сетки -

<asp:GridView ID="group_table" Runat="server" 
    AutoGenerateColumns="False" onprerender="group_table_PreRender" 
    onrowdatabound="group_table_RowDataBound" 
    ClientIDMode="Static" CellPadding="4" ForeColor="#333333" 
    GridLines="None" Width="915px" BorderStyle=Ridge > 
    <AlternatingRowStyle BackColor="White" /> 

    <Columns> 
    <asp:TemplateField ItemStyle-Width=90> 
     <HeaderTemplate> 
      <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all"/> 
     </HeaderTemplate> 
    <ItemTemplate> 

     <asp:CheckBox ID="selectCheckBox" runat="server"/> 


    </ItemTemplate> 

    </asp:TemplateField> 

и попытался реализовать следующие функции яваскрипта, так что, когда пользователь нажимает selectAllCheckBox все галочки будут проверены -

$(document).ready(function() { 

    var headerCheckbox = $('#group_table > tbody > tr > th > input:checkbox'); 

    headerCheckbox.click(function() { 
    var headerChecked = $(this).attr('checked'); 
    var rowCheckboxes = $('#group_table > tbody > tr > td > input:checkbox'); 
    rowCheckboxes.attr('checked', headerChecked); 
    }); 

}); 

Но почему-то это не влияет, где я иду не так?

Answer 1

Как указано в моем комментарии к вопросу (который вы указали правильно), у вас есть переключатель для переменной headerCheckbox. Заголовки таблиц указаны в theadнеtbody. Попробуйте это:

var headerCheckbox = $("#group_table > thead > tr > th > input:checkbox"); 

Answer 2

Я не знаю, как asp: GridView генерирует html, но, может быть, проблема заключается в том, что вы добавляете обработчик click на tbody > tr > th вместо thead > tr > th?

Answer 3

Если бы я тебя, я бы сделал это таким образом

<asp:GridView ID="group_table" runat="server" AutoGenerateColumns="False" ClientIDMode="Static" 
     CellPadding="4" ForeColor="#333333" GridLines="None" Width="915px" BorderStyle="Ridge"> 
     <AlternatingRowStyle BackColor="White" /> 
     <Columns> 
      <asp:TemplateField ItemStyle-Width="90"> 
       <HeaderTemplate> 
        <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all" onclick="toggleChecks(this);" /> 
       </HeaderTemplate> 
       <ItemTemplate> 
        <asp:CheckBox ID="_CheckBox" runat="server" CssClass="psudoClass" /> 
       </ItemTemplate> 
      </asp:TemplateField> 
     </Columns> 
</asp:GridView> 

Добавить в флажков, которые будут проверены, и сделать это

function toggleChecks(sender) { 
    $(".psudoClass").each(function (index, item) { 
     item.children[0].checked = sender.checked; 
    }); 
}