0

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

这可能吗？

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

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

4

2 回答 2

2

你可以用 jQuery 做到这一点

演示 http://jsfiddle.net/kevinPHPkevin/7GUqc/

$(document).ready(function(){

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


});
于 2013-05-18T19:40:31.887 回答
1

为了跟进前面的答案，我对 .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

您需要通过在 head 部分添加标签来链接到 jQuery 框架文件<script>，例如：

<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();
    });
});

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

于 2013-05-18T20:45:34.073 回答