如何根据radiobuttonlist选择显示或隐藏texbox

时间:2013-03-01 18:21:53

标签: javascript jquery asp.net

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

我有一个带有两个值的radioButtonList,Approved或Rejected。

如果所选值为“已批准”,请隐藏该texbox。如果选择了拒绝,则显示文本框,以便可以在框中输入拒绝原因。

我无法让这个工作。我试过了:

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

不确定我做错了什么。

1 个答案:

答案 0 :(得分:1)

您要将名称与id在选择器中进行比较,您应该使用包含通配符的id属性选择器。您不能将ClientIDdivReason一起使用,因为它没有 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>