jquery - Displaying an optional input field triggered by a radio button -

as can see here, have bulleted list. last option on list "other". when other selected, want "if other, please describe here:" element , respective input box displayed. if "other" not selected, i'd keep hidden.

is possible?

<div class="section section_required">     <asp:label id="pleaseselect" runat="server"          text="please select 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 working</asp:listitem>         <asp:listitem value="content3">employer/ advisory board testimonials</asp:listitem>         <asp:listitem value="content4">appointments professional organizations , boards</asp:listitem>         <asp:listitem value="content5">awards , 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 /> 

i'm not sure start. can point me in right direction?

to follow on earlier answer, guessing bit @ .asp syntax, need following.

you need add classes html, example, .radiobuttonlist on radio button group tag , .otheritem on <option> tag corresponding other 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" /> 

you need modify jquery selectors this:

$('.radiobuttonlist .otheritem').click(function(){     $('#otherlabel').show(); }); 

i have not tested should pretty close. may need adjustment if have multiple radio button groups within same form, please let me know if case.

linking jquery

you need link jquery framework file adding <script> tag in head section, example:

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

syntax alert

you may want adjust code , place optional input field in label tag:

<asp:label id="otherlabel" runat="server" text="if other... ">     <input id="othertextbox" placeholder="please describe here..." type="text" /> </asp:label> 

otherwise need toggle both .otheritem , #otherlabel.

jquery multiple radio button groups

if should happen have multiple radio button groups within same form needing optional text input field, need adjust jquery action.

one way of doing shown at: http://jsfiddle.net/audetwebdesign/tmkpx/

for example, if html looked this:

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

the jquery might like:

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

one action displays hidden field needed , other hides if user changes his/her mind , picks non-other option.