如何单击 RadioButtonList 将显示/隐藏文本框答案

【问题标题】：How to onclick RadioButtonList will show/hide a textbox如何单击 RadioButtonList 将显示/隐藏文本框
【发布时间】：2013-12-08 08:54:27
【问题描述】：

<asp:RadioButtonList ID="rbl_donorType" runat="server" >
<asp:ListItem Text="Individual" Value="Individual" ></asp:ListItem>
<asp:ListItem Text="Coporate" Value="Coporate" ></asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="TextBox1" style="visibility:hidden;" runat="server">
</asp:TextBox>

如何使当我点击列表项Text="Individual"时，TextBox1 可见，当我点击列表项Text="Coporate" 时，TextBox1 将被隐藏？

【问题讨论】：

标签： c# asp.net

【解决方案1】：

试试这个

<asp:RadioButtonList ID="rbl_donorType" runat="server" OnSelectedIndexChanged="rbl_donorType_SelectedIndexChanged" AutoPostBack="true">
   <asp:ListItem Text="Individual" Value="Individual">
   </asp:ListItem>
   <asp:ListItem Text="Coporate" Value="Coporate" ></asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="TextBox1" runat="server">
   test
</asp:TextBox>

后面的代码：

    protected void rbl_donorType_SelectedIndexChanged(object sender, EventArgs e)
    {
        var selectedItem = rbl_donorType.SelectedItem;

        TextBox1.Visible = selectedItem.Text == "Coporate";
    }

【讨论】：

【解决方案2】：

我更喜欢client side 脚本，它不需要回发到服务器。试试这个，

<script type="text/javascript">
    $(document).ready(function(){
        $(':radio').click(function(){
            if($(this).val().trim() == "Individual"){
                $(':text').css('visibility','visible');
            }else{
                $(':text').css('visibility','hidden');
            }
        });
    });
    </script>

【讨论】：