多个文本字段，根据单选选择显示/隐藏(Html，JS）

我现在正在研究一个form，遇到了以下问题。

问题

我在同一页面上有多个问题，答案选项完全相同（是/否/也许），其中一个是"也许"。用户选中名为"也许"的radio-button或check-box后，应出现text field。我已经实现了一个javascript，但它似乎不起作用。当有多个文本字段和单选按钮时，我真的不知道如何编程。

我对HTML/Jquery/Javascript/CSS相当陌生。

如何实现这一点？我知道有人问过类似的问题，但我现在真的一无所知。

非常感谢您的支持！

[编辑] 我尝试提供相同的 id，但它似乎不起作用。

这是对代码的摆弄：http://jsfiddle.net/03gkgfah/1/

这是表格的匿名摘录（我不是故意的，所以你可以有一个更好的概述）：

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

.css：

#sonstiges_on{display:none;}

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