复选框选择内部嵌套中继器答案

【问题标题】：Checkbox Select Inside nested repeater复选框选择内部嵌套中继器
【发布时间】：2014-06-24 05:55:05
【问题描述】：

 <asp:Repeater ID="rptDetails" runat="server" OnItemDataBound="rptDetails_ItemDataBound">
        <HeaderTemplate>
            <table width="100%" cellpadding="0" cellspacing="0" border="0" class="table_box">
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td style="width: 200px; text-align: left; vertical-align: top" class="pf14">
                    <asp:Label ID="lblLoginId" runat="server" Text='<%#Eval("LoginId")%>' Visible="false"></asp:Label>                        
                </td>
                <td align="left" valign="top">
                    <asp:Repeater ID="rptSubDetails" runat="server" OnItemDataBound="rptSubDetails_ItemDataBound">
                        <HeaderTemplate>
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding: 5px;"
                                class="separator">
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>
                                <td style="width: 300px; text-align: left; background-color: #e4e4e4; padding: 5px;"
                                    class="pf14">
                                    <asp:CheckBox ID="chkMain" runat="server" />
                                    <asp:Label ID="lTitle" runat="server" Text='<%#Eval("Title")%>'></asp:Label>                                       
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">
                                    <asp:Repeater ID="rptInnerDetails" runat="server" OnItemCommand="rptInnerDetails_ItemCommand">
                                        <HeaderTemplate>
                                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding: 5px;">
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <tr>
                                                <td align="center" width="50px">                                                        
                                                    **<asp:CheckBox ID="chkSub" runat="server" />**
                                                </td>
                                                <td align="left" class="pf14">
                                                    <b>Comment :</b>
                                                    <asp:Label ID="lblComment" runat="server"><%# Eval("Comment") %></asp:Label>
                                                </td>                                                    
                                            </tr>
                                        </ItemTemplate>
                                        <FooterTemplate>
                                            </table>
                                        </FooterTemplate>
                                    </asp:Repeater>
                                </td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </td>
            </tr>
            <tr>
                <td class="separator"></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

jQuery 代码未按预期工作......

<script type="text/javascript"> 
     function toggleSelectionUsingHeaderCheckBox() { 
      $("input[name$='chkMain']").each(function () { 
               if ($("input[name$='chkMain']").prop('checked')) { 
                  $("input[name$='chkSub']").prop('checked', true); 
               } 
               else 
               { $("input[name$='chkSub']").prop('checked', false); 
               } 
              }); 
            } 
</script>

**您好，我想使用 jquery 取消选中复选框，但当我选中主复选框时，所有子复选框都会被选中...

我只想检查那些是主复选框的孩子。**

【问题讨论】：

请发布您的 jquery 代码。
@Saurabhchauhan232，通过在此处编辑或在带有链接的 jsfiddle 中将 jquery 粘贴到您的问题中。
帮助摆脱这个...

标签： c# javascript jquery asp.net

【解决方案1】：

使用这个：找到父 tr 然后下一个 tr 到它。并在 next tr 中找到所有子复选框并选中或取消选中它们。

<script type="text/javascript"> 

        $("input[name$='chkMain']").change(function () {
          // get all child checkbox
          var $subCheckbox = (this).closest('tr').next('tr').find("input[name$='chkSub']"); 
          // check or uncheck child
          $subCheckbox.prop('checked', $(this).prop('checked')); 
          }); 

   </script>

【讨论】：

是选择所有复选框还是什么都不选择？
你能把你的html表结构发给我吗？请将其发布在 jsfiddle 上（获取您页面的查看源并发布）。
兄弟我无法回答我的答案只是检查这个.... function toggleSelectionUsingHeaderCheckBox() { $("input[name$='chkMain']").each(function () { / / 获取所有子复选框 var subCheckbox = $(this).parent().parent().next().find("td").find("table").find("tr").find("td ").find("input[name$='chkSub']"); alert($(this).prop('checked')); subCheckbox.prop('checked', $(this).prop('checked ')); }); }