我正在處理表單,並且存在以下問題。我在同一頁面上有多個問題,答案完全相同(是/否/可能),其中一個是「可能」。在用戶檢查了一個單選按鈕或一個名爲「maybe」的複選框之後,應該出現一個文本框。我已經實現了一個JavaScript,但它似乎並沒有工作。當有多個文本字段和單選按鈕時,我不知道如何編程。我對HTML/Jquery/Javascript/CSS相當陌生。基於無線電選擇顯示/隱藏多個文本字段html javascript
這是如何實現的?我知道類似的問題已經被提出,但我在這一點上確實無能爲力。
非常感謝您的支持!
[編輯]我試着給出相同的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();
}
}); });
_id_應該是唯一的,你用在所有的人都 「maybe_on」,也'$( 「輸入:無線電[NAME =」 Teil01_Frage01" )'使用單引號其中一個雙引號 – KTU 2015-01-09 21:22:50