基于无线电选择显示/隐藏多个文本字段html javascript

Question

我正在处理表单，并且存在以下问题。我在同一页面上有多个问题，答案完全相同（是/否/可能），其中一个是“可能”。在用户检查了一个单选按钮或一个名为“maybe”的复选框之后，应该出现一个文本框。我已经实现了一个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(); 
     } 
}); }); 

Answer 1

正如在评论中所述，ID必须是唯一的，并且你可能单选按钮共享一个。这且不说，你可以使用下面的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

创建一个页内的Javascript功能，它检查被点击有问题的输入字段。如果是，它显示'可能'输入。

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

} 

编辑 http://jsfiddle.net/sanova/03gkgfah/15/