复选框选择内嵌嵌套转发器

时间:2014-06-24 05:55:05

标签: c# javascript jquery asp.net

 <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 未按预期工作的COde ....

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

**你好我想检查uncheck复选框使用jquery我试过但当我检查主复选框时所有Sub复选框都被检查...

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

I want like this please help me to get exact...

1 个答案:

答案 0 :(得分:0)

使用此功能:找到父tr,然后找到tr。并找到下一个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>