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>

并尝试实施以下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);
  }); 

});

但由于某些原因，这没有任何影响，我哪里出错？

Answer 1

正如我对问题的评论（你说的那样是正确的）所述，你有headerCheckbox变量的选择器错误。表格标题位于thead 不 tbody。试试这个：

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

Answer 2

如果我是你，我会这样做的

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

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

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

Answer 3

我不知道asp：GridView是如何生成html的，但问题是你可以在tbody > tr > th而不是thead > tr > th上添加点击处理程序吗？

选择网格视图中的所有复选框

3 个答案: