多个文本字段，基于单选选择显示/隐藏 (Html,JS)

Question

I am working on a form right now and have the following problem.

Problem

I have multiple questions on the same page with the exact same answer options (yes/no/maybe), and one of them is "maybe". After the user has checked a radio-button or a check-box called "maybe" a text field should appear. I have implemented a javascript but it doesn't seem to work. I don't really know how to program this when there are multiple text fields and radio buttons.

I am fairly new to HTML/Jquery/Javascript/CSS.

How can this be achieved? I know similar questions have been asked, but I am really clueless at this point.

Thank you very much for your support!

[EDIT] I tried giving the the same id's but it doesn't seem to work.

Here is a fiddle with the code: http://jsfiddle.net/03gkgfah/1/

This is an anonymized excerpt from the form (i didn't simply it on purpose so you could have a better overview):

   <fieldset data-mini="false" data-inline="true">
<legend>1. Test question 1</legend>
  <div class="ui-grid-b ui-responsive">
   <div class="ui-block-a">
    <input name="Teil01_Frage01" id="tUmfrage01_p01_f01_q01_radio01" value="yes" type="radio">
    <label for="tUmfrage01_p01_f01_q01_radio01">Yes</label>
   </div>
   <div class="ui-block-b">
    <input name="Teil01_Frage01" id="tUmfrage01_p01_f01_q01_radio02" value="no" type="radio">
    <label for="tUmfrage01_p01_f01_q01_radio02">No</label>
   </div>
   <div class="ui-block-a">
    <input name="Teil01_Frage01" id="tUmfrage01_p01_f01_q01_radio03" value="maybe" type="radio">
    <label for="tUmfrage01_p01_f01_q01_radio03">Maybe:</label>
   </div>
   <div class="ui-block-b" id="maybe_on">
    <input name="Teil01_Frage01" id="tUmfrage01_p01_f01_q01_textinput01" value="" type="text" maxlength="150" placeholder="maybe...">
   </div>
  </div>
</fieldset>


   <fieldset data-mini="false" data-inline="true">
<legend>2. Test question 2?</legend>
  <div class="ui-grid-b ui-responsive">
   <div class="ui-block-a">
    <input name="Teil01_Frage02" id="tUmfrage01_p01_f01_q02_radio01" value="yes" type="radio">
    <label for="tUmfrage01_p01_f01_q02_radio01">Yes</label>
   </div>
   <div class="ui-block-b">
    <input name="Teil01_Frage02" id="tUmfrage01_p01_f01_q02_radio02" value="no" type="radio">
    <label for="tUmfrage01_p01_f01_q02_radio02">No</label>
   </div>
   <div class="ui-block-a">
    <input name="Teil01_Frage02" id="tUmfrage01_p01_f01_q02_radio03" value="maybe" type="radio">
    <label for="tUmfrage01_p01_f01_q02_radio03">Maybe:</label>
   </div>
   <div class="ui-block-b" id="maybe_on">
    <input name="Teil01_Frage02" id="tUmfrage01_p01_f01_q02_textinput01" value="" type="text" maxlength="150" placeholder="maybe...">
   </div>
  </div>
</fieldset>


<fieldset data-mini="false" data-inline="true">
<legend>2. Test question 3?</legend>
  <div class="ui-grid-b ui-responsive">
   <div class="ui-block-a">
    <input name="Teil01_Frage03" id="tUmfrage01_p01_f01_q03_radio01" value="yes" type="radio">
    <label for="tUmfrage01_p01_f01_q03_radio01">Yes</label>
   </div>
   <div class="ui-block-b">
    <input name="Teil01_Frage03" id="tUmfrage01_p01_f01_q03_radio02" value="no" type="radio">
    <label for="tUmfrage01_p01_f01_q03_radio02">No</label>
   </div>
   <div class="ui-block-a">
    <input name="Teil01_Frage03" id="tUmfrage01_p01_f01_q03_radio03" value="maybe" type="radio">
    <label for="tUmfrage01_p01_f01_q03_radio03">Maybe:</label>
   </div>
   <div class="ui-block-b" id="maybe_on">
    <input name="Teil01_Frage03" id="tUmfrage01_p01_f01_q03_textinput01" value="" type="text" maxlength="150" placeholder="maybe...">
   </div>
  </div>
</fieldset>

The .css:

#sonstiges_on{display:none;}

The Javascript:

$(document).ready(function(){
$("#maybe_on").hide();
$("input:radio[name*='Teil']").change(function(){//*=   to search for a substring
                                                //='Teil' because the name of the buttons begin with Teil
                                                //for example Teil01_Frage01
        if(this.value == 'maybe' && this.checked){
          $("#maybe_on").show();
        }else{
          $("#maybe_on").hide();
        }
}); });

Answer 1

As stated in the comments, IDs must be unique, and your maybe radio buttons share the same one. That aside, you could use the following jQuery:

$(document).ready(function () {
    $(".maybe_on").hide();
    $("input:radio[name^='Teil01_']").change(function () {
        $(this).closest('.ui-grid-b.ui-responsive').find('.maybe_on').toggle((this.value == 'maybe' && this.checked));
    });
});

jsFiddle example

Answer 2

Created an inpage Javascript function that checks if the input field in question is clicked. And if it is, it shows the 'maybe' input.

function yesnoCheck() {
if (document.getElementById('tUmfrage01_p01_f01_q01_radio03').checked) {
    document.getElementById('maybe_on').style.display = 'block';
}
else document.getElementById('maybe_on').style.display = 'none';

}

edit http://jsfiddle.net/sanova/03gkgfah/15/