jquery选中复选框嵌套gridview时，父复选框选中

我想检查嵌套的gridview中的所有行的复选框是父母的复选框被选中。或者取消选中父代时，取消选中嵌套gridview中的所有复选框。jquery选中复选框嵌套gridview时，父复选框选中

我发现了一个几乎符合我需求的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>

来源

2013-10-22 Gloria Santin

你的复选框在子网格视图？并且您希望在检查复选框时更改父行颜色？ – SanketS

父行中有一个复选框。选中时，该行将更改颜色。（这样可行）。我想在添加父复选框时添加网格视图中的子复选框。它是一个嵌套的gridview。 –

我想通了这一点！万一有人在这样的事情上挣扎。这是我工作的...

只需要使用子网格的ID设置网格变量。因此，请替换此行： var grid = $（this）.closest（“table”）;

包含以下行： var $ checkboxLabel =“[id * = div”+ $（this）.next（'label'）。text（）+“]”; var nestedGrid = $（$ checkboxLabel）;

就是这样。

来源

2013-10-25 15:24:07

jquery选中复选框嵌套gridview时，父复选框选中

回答

相关问题