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時，父複選框選中

回答

相關問題