2

我有以下网格视图 -

<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>

并尝试实现以下 javascript 函数，以便当用户单击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);
  }); 

});

但由于某种原因，这没有影响，我哪里错了？

4

3 回答 3

1

正如我对问题的评论中所述（您说的是正确的），您的headerCheckbox变量选择器错误。表标题thead 不在. tbody试试这个：

var headerCheckbox = $("#group_table > thead > tr > th > input:checkbox");
于 2013-02-21T13:26:51.033 回答
1

如果我是你，我会这样做

<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>

将 a 添加psudoClass到要检查的复选框中，然后执行此操作

function toggleChecks(sender) {
   $(".psudoClass").each(function (index, item) {
        item.children[0].checked = sender.checked;
   });
}
于 2013-02-21T13:41:02.630 回答
0

我不知道 asp:GridView 是如何生成 html 的，但也许问题是你添加了点击处理程序 tbody > tr > th 而不是 thead > tr > th?

于 2013-02-21T13:23:41.677 回答