选中父复选框时，jquery在嵌套gridview中选择复选框答案

【问题标题】：jquery select checkboxes in nested gridview when parent checkbox checked选中父复选框时，jquery在嵌套gridview中选择复选框
【发布时间】：2013-10-31 15:24:55
【问题描述】：

我想检查嵌套网格视图中所有行的复选框是否选中了父级的复选框。或者在取消选中父级时取消选中嵌套网格视图中的所有复选框。

我找到了一个几乎符合我需要的 jquery 示例。但是，当您选择父网格中的复选框时，它会检查父网格和所有子网格中的所有复选框。我希望它只检查子网格中的所有框。

我认为，问题在于识别正确的网格来更新复选框。 var grid = $(this).closest("table"); 行向上遍历树并选择所有区。我需要识别这个区域的 InternalGrid。但是我尝试过使用 .children() 和一些东西，但它不起作用。

那么如何识别被选中的小区的InternalGrid呢？

jquery如下：

 $("[id*=District]").live("click", function () 
 {
        var chkHeader = $(this);

        var grid = $(this).closest("table");

        $("input[type=checkbox]", grid).each(function ()   
        {
            if (chkHeader.is(":checked"))   
            {
                $(this).attr("checked", "checked");
                $("td", $(this).closest("tr")).addClass("selected");
            } 
            else 
            {
                $(this).removeAttr("checked");
                $("td", $(this).closest("tr")).removeClass("selected");
            }
        });       
    });

谢谢

这是 HTML：

    <Columns>
        <asp:TemplateField HeaderText="District" SortExpression="district" HeaderStyle-Width="200px">
            <ItemTemplate>
            <a href="javascript:divexpandcollapse('div<%# Eval("district")%>');">
            <img id="imgdiv<%# Eval("district")%>" width="10px" border="0" src="Images/plus.png" /> </a> 
            <asp:CheckBox ID="District" Text='<%#Bind("district")%>' runat="server"  />
            </ItemTemplate>
            <HeaderStyle Width="200px"></HeaderStyle>
            <ItemStyle HorizontalAlign="Center" Width="200px"></ItemStyle>
        </asp:TemplateField> 

        <asp:TemplateField HeaderText="Server" HeaderStyle-Width="280px">
        <ItemTemplate>
        <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
           <asp:ListItem>A1</asp:ListItem>
           <asp:ListItem>A2</asp:ListItem>
           <asp:ListItem>Both</asp:ListItem>
        </asp:DropDownList>

                <tr><td colspan="100%">  
                <div id="div<%# Eval("district") %>" style="display:none; position: relative; left: 15px; overflow: auto">

                      <asp:GridView ID="InternalGrid" runat="server" AutoGenerateColumns="False"  OnSorting="GridView1_Sorting" 
                           BorderStyle="Ridge" BorderWidth="2px"  HorizontalAlign="Center"
                           GridLines="Both" ShowHeader="True" ShowFooter="False" >
                        <HeaderStyle BackColor="#4A3C8C" ForeColor="#E7E7FF"></HeaderStyle>
                        <Columns>
                            <asp:TemplateField HeaderText="Station"  SortExpression="number">
                                <ItemTemplate>
                                <asp:CheckBox ID="Station" Text='<%#Bind("number")%>' runat="server" onclick="Check_Click(this)"/>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                             </asp:TemplateField>

                             <asp:TemplateField HeaderText="Server" >
                                <ItemTemplate>
                                <asp:DropDownList DataTextField="Server" DataValueField="Server" ID="DropDownList2" Runat="server" >
                                   <asp:ListItem>A1</asp:ListItem>
                                   <asp:ListItem>A2</asp:ListItem>
                                   <asp:ListItem>Both</asp:ListItem>
                                </asp:DropDownList>
                                </ItemTemplate>
                                 <ItemStyle HorizontalAlign="Center" Width="130px"></ItemStyle>
                            </asp:TemplateField>

                            <asp:BoundField DataField="TimeZone" HeaderText="Time Zone" SortExpression="timeZone">
                                <ItemStyle HorizontalAlign="Center" Width="130px" />
                            </asp:BoundField>

                             <asp:BoundField DataField="ServerType" HeaderText="Server Type" SortExpression="serverType">
                                <ItemStyle HorizontalAlign="Center" Width="135px" />
                            </asp:BoundField>

                       </Columns>
                        <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
                    </asp:GridView>

                    </div> 
                 </td></tr> 
            </ItemTemplate>
            <HeaderStyle Width="305px"></HeaderStyle>
             <ItemStyle HorizontalAlign="Center" Width="280px"/>
         </asp:TemplateField>                                    
    </Columns>
<BoundaryStyle BorderColor="Gray" BorderWidth="1px" BorderStyle="Solid"></BoundaryStyle>
<RowStyle BackColor="#DEDFDE" ForeColor="Black" />
</cc1:CoolGridView>
</div>

【问题讨论】：

您的复选框在子网格视图中吗？并且您想在选中复选框时更改父行颜色？
父行中有一个复选框。选中后，该行将改变颜色。（这样可行）。我想在选中父复选框时添加，网格视图中的子复选框也被选中。它是一个嵌套的网格视图。

标签： jquery html asp.net gridview

【解决方案1】：

我想通了！以防有人在与这样的事情作斗争。这对我有用...

只需要使用子网格的ID来设置网格变量。所以替换这一行： var grid = $(this).closest("table");

这些行： var $checkboxLabel = "[id*=div" + $(this).next('label').text() + "]"; var nestedGrid = $($checkboxLabel);

就是这样。

【讨论】：