Question

正如你在这里看到的，我有一个项目符号列表。该列表中的最后一个选项是“其他”。当选择其他时，我想要显示“如果其他，请在此描述：”元素和相应的输入框。如果没有选择“其他”，那么我想隐藏它。

这可能吗？

<div class="section section_required">
    <asp:Label ID="PleaseSelect" runat="server" 
        Text="Please select the type of content:"></asp:Label>
    <br />
    <br />
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" Width="675px">
        <asp:ListItem Value="content1">Alumni Achievement/ Alumni Profile</asp:ListItem>
        <asp:ListItem Value="content2">List of Training Sites or Locations our Graduates are working</asp:ListItem>
        <asp:ListItem Value="content3">Employer/ Advisory Board Testimonials</asp:ListItem>
        <asp:ListItem Value="Content4">Appointments to Professional Organizations and Boards</asp:ListItem>
        <asp:ListItem Value="Content5">Awards and Recognition</asp:ListItem>
        <asp:ListItem Value="Content6">Bios</asp:ListItem>
        <asp:ListItem Value="Content7">White Papers/ Articles/ Books Published</asp:ListItem>
        <asp:ListItem Value="Content8">Student Acheivements/ Success Stories</asp:ListItem>
        <asp:ListItem Value="Content9">Guest Speaker/ Lecture Series</asp:ListItem>
        <asp:ListItem Value="Content10">Events/ Announcements</asp:ListItem>
        <asp:ListItem Value="Content11">Photo/ Video of Past Events</asp:ListItem>
        <asp:ListItem Value="Content12">Other:</asp:ListItem>
    </asp:RadioButtonList>
    <asp:Label ID="otherLabel" runat="server" 
        Text="If Other, please describe here: "></asp:Label>
    <input id="otherTextbox" placeholder="Please describe here..." type="text" /><br />
    <br />

我不知道从哪里开始。你能为我指出正确的方向吗？

Answer 1

您可以使用jQuery执行此操作

样本 http://jsfiddle.net/kevinPHPkevin/7GUqc/

$(document).ready(function(){

    $('input#radio').click(
        function(){
            $("#otherTextbox").show();
    });


});

Answer 2

为了跟进前面的回答，我猜了一下.asp语法，但你需要做类似以下的事情。

您需要向您添加一些类HTML，例如，单选按钮组标记上的.radioButtonList和.otherItem标记上与您的其他选项对应的<option>。

<asp:RadioButtonList ID="RadioButtonList1" Class="radioButtonList" ... >
    <asp:ListItem Value="content1">Alumni...</asp:ListItem>
    ...
    <asp:ListItem Value="Content11">Photo/ Video of Past Events</asp:ListItem>
    <asp:ListItem Value="Content12" Class="otherItem">Other:</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="otherLabel" runat="server" 
    Text="If Other, please describe here: "></asp:Label>
<input id="otherTextbox" placeholder="Please describe here..." type="text" />

然后你需要像这样修改jQuery选择器：

$('.radioButtonList .otherItem').click(function(){
    $('#otherLabel').show();
});

我没有测试过这个，但它应该非常接近。如果您在同一表格中有多个单选按钮组，则可能需要进行一些调整，如果是这种情况，请告诉我。

链接到jQuery

您需要在头部添加<script>标记来链接到jQuery框架文件，例如：

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <link href="../includes/css/Intake.css" rel="stylesheet" type="text/css" />  
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
    <script>
        $(document).ready(function(){
            $('.radioButtonList .otherItem').click(function(){
                $('#otherLabel').show();
            });
        });   
    </script> 
</asp:Content>

语法提示

您可能需要调整代码并将可选输入字段放在标签标记中：

<asp:Label ID="otherLabel" runat="server" Text="If Other... ">
    <input id="otherTextbox" placeholder="Please describe here..." type="text" />
</asp:Label>

否则您需要切换.otherItem和#otherLabel。

多个单选按钮组的jQuery

如果碰巧在同一表单中有多个单选按钮组需要可选的文本输入字段，则需要调整jQuery操作。

执行此操作的一种方法显示在：http://jsfiddle.net/audetwebdesign/TMkPX/

例如，如果您的HTML看起来像这样：

<ul class="radioGroup">
    <li><label><input type="radio" name="theOption2" value="Option1" />First Option</label></li>
    <li><label><input type="radio" name="theOption2" value="Option2" />Second Option<label></li>
    <li><label><input type="radio" name="theOption2" value="Option3" />Third Option<label></li>
    <li><label><input type="radio" name="theOption2" value="OptionX" />Other Option<label></li>
    <li class="other"><input id="otherTextbox2" placeholder="Please describe here..." type="text" /></li>
</ul>

jQuery可能看起来像：

$(document).ready(function () {
    $('.radioGroup input[value="OptionX"]').click(function () {
        $(this).parentsUntil('.radioGroup').nextAll('.other').show();
    });

    $('.radioGroup input[value!="OptionX"]').click(function () {
        $(this).parentsUntil('.radioGroup').nextAll('.other').hide();
    });
});

一个操作会根据需要显示隐藏字段，另一个操作会在用户改变主意并选择其他选项时隐藏它。

显示由单选按钮触发的可选输入字段

2 个答案: