当从单选按钮列表中选择单选按钮时，使用 JQuery 在中继器中显示文本框

Question

我正在构建一些类似于 Web 应用程序中的调查的功能，其中向用户提供要阅读的问题列表。问题底部有一个回答问题的链接。当用户单击链接回答问题时，他们会看到一个模态弹出窗口，该窗口内置有一个转发器。转发器显示问题以及作为可能答案的单选按钮列表。每个答案都必须有理由，因此答案旁边有一个理由框。如果用户选择答案“低于”（值为 B），则需要出现一个文本框，供用户输入纠正措施/预防措施。我现在可以使用所有这些功能，除了当用户选择“下方”时，所有纠正框都会出现在整个中继器中，而不是出现在受人尊敬的中继器行中。我怎样才能做到只让文本框显示在“下面”答案的行上？

代码片段：

<script type="text/javascript">
$(document).ready(function () {
    $("input:radio").change(function (eventObject) {
        var type = $.trim($(this).val());
        if (type == "B") {
            alert("Clicked"); //Testing...
            $('.tblPreventative').show();
        }
        else
            $('.tblPreventative').hide();
    });

});

<asp:Repeater runat="server" ID="rptQuestions">
        <ItemTemplate>
            <div class="AnswerSection">
                <div class="question">
                <asp:Label runat="server" ID="lblQuestId" Text='<%#Eval("guidQuestionId")%>' Visible="false" />
                    <%#Eval("strQuestion")%>
                </div>
                <div class="answer">
                <table width="100%">
                    <tr>
                        <td width="10%">
                            <asp:RadioButtonList runat="server" ID="rbAnswer">
                                <asp:ListItem Text="Meets" Value="M" />
                                <asp:ListItem Text="Above" Value="A" />
                                <asp:ListItem Text="Below" Value="B" />
                                <asp:ListItem Text="N/A" Value="N" />
                            </asp:RadioButtonList>
                            <asp:RequiredFieldValidator ID="rqfvRBAnswer" runat="server" ControlToValidate="rbAnswer" ErrorMessage="You must select an Assessment." ForeColor="Red" />
                        </td>
                        <td valign="top" width="90%" style="padding-right:5px">
                            <strong>Justification</strong>
                            <br />
                            <asp:TextBox ID="txtJustification" runat="server" TextMode="MultiLine" Width="100%" Height="70px" />
                            <asp:RequiredFieldValidator ID="rqfvJustification" runat="server" ControlToValidate="txtJustification" ErrorMessage="Please input a justification." ForeColor="Red" />
                        </td>
                    </tr>
                    <tbody class="tblPreventative" style="display:none;">
                    <tr>
                         <td width="10%">
                         </td>
                         <td valign="top" width="90%" style="padding-right:5px">
                         <strong>Corrective Action</strong>
                            <br />
                            <asp:TextBox ID="txtPreventative" runat="server" TextMode="MultiLine" Width="100%" Height="70px"/>
                         </td>
                    </tr>
                    </tbody>
                </table>

                </div>
            </div>
            <br />
        </ItemTemplate>
    </asp:Repeater>

Answer 1

试试这个脚本：

$(document).ready(function () {
     $("input:radio").change(function (eventObject) {
          var type = $.trim($(this).val());
          if (type == "B") {
               alert("Clicked"); //Testing...
               $(this).closest("tr").next("tbody").show();
          }
          else
               $(this).closest("tr").next("tbody").hide();
     });

});