基於無線電選擇顯示/隱藏多個文本字段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/