javascript - 如何根据单选按钮列表选择显示或隐藏文本框

Question

老实说，我认为这很简单。

我有一个带有两个值的 radioButtonList:“已批准”或“已拒绝”。

如果选定的值已批准，则隐藏文本框。如果选择拒绝，则显示文本框，以便可以在框中输入拒绝的原因。

我无法让它工作。我尝试过:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('input:[name=<%= apr_rej.ClientID %>]').click(function () {
            if ($(this).val() == 'Approved') {
                $('#<%= divReason.ClientID %>').hide();
            } else {
                $('#<%= divReason.ClientID %>').show();
            }
        });
    });
</script>

我得到 divReason 必须声明。

然后我尝试了:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('input:[name=<%= apr_rej.ClientID %>]').click(function () {
            if ($(this).val() == 'Approved') {
                $('#divReason').hide();
            } else {
                $('#divReason').show();
            }
        });
    });
</script>

没有错误，但没有触发事件。

这是标记:

       <tr>
         <td align="left" class="style1" style="border: thin solid #6699FF">
             <h3 style="text-align: left">
                 2.<strong> Select One:</strong></h3>
           </td>
            <td style="border: thin solid #6699FF" class="style5"><asp:RadioButtonList runat="server" 
                    ID="apr_rej" repeatdirection="Horizontal" TextAlign="Left" CellPadding="0" 
                    CellSpacing="0" style="font-weight:700; text-align: center;" 
                    Height="21px" Width="406px" >
                    <asp:ListItem Text="Approve" Value="Approved" />
                    <asp:ListItem Text="Reject" Value="Rejected" />
               </asp:RadioButtonList>
           </td>
       </tr>
       <tr id="divReason">
          <td align="left" class="style3" style="border: thin solid #6699FF">
             <h3 class="style4">
3. Enter Comments:</h3>
          </td>
          <td style="border: thin solid #6699FF;font-Weight:bold;" class="style5">Comments:(If this form is Rejected, you must give a reason.)<br />
              <asp:TextBox id="txtreason" runat="server" TextMode ="MultiLine" 
                 style="border: 1px solid #6699FF" BorderColor="White" Height="114px" 
                  Width="574px"></asp:TextBox><br />
         </td>
      </tr>

不知道我做错了什么。

Answer 1

您正在比较选择器中的名称和 id，您应该使用带有包含通配符的 id 属性选择器。您不能将 ClientID 与 divReason 一起使用，因为它没有 runat="server"。

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $('input:[id*=<%= apr_rej.ClientID %>]').click(function () {
            if ($(this).val() == 'Approved') {
                $('#divReason').hide();
            } else {
                $('#divReason').show();
            }
        });
    });
</script>