[英]Display/Hide form when radio button selected/Unselected
可以在以下代碼中使用您的幫助。 （見snipet）
選擇“JA”時，它應該顯示一個框以輸入信息。
如果選擇“Nein”，則不應顯示任何內容。
在我選擇 nein 的那一刻，輸入框仍然顯示。
在此先感謝您的幫助！
function myFunction() { var radioBoxOne = document.getElementById("nein"); var radioBox = document.getElementById("ja"); var text = document.getElementById("Gehalt"); if (radioBox.checked == true){ text.style.display = "block"; } else if (radioBoxOne.checked == true){ text.style.display = "none"; } }
<!DOCTYPE html> <html> <body> <label class="add_top_15">Gehalt (netto)</label> </br></br> <div class="form-group radio_input"> <label for="myCheck" class="container_radio mr-3">Ja <input type="radio" name="gehalt" value="ja" class="required" id="ja" onclick="myFunction()"> <span class="checkmark"></span> </label> <label for="myCheckEd" class="container_radio mr-3">Nein <input type="radio" name="gehalt" value="nein" class="required" id="nein"> <span class="checkmark"></span> </label> </div> </br></br> <div id="Gehalt" style="display:none" class="form-group add_top_30"> <label for="Gehalt">Gehalt (netto)</label> <input type="text" name="Gehaltt" id="Gehalt" class="form-control required"> </div> </body> </html>
是的，您忘記在“nein”輸入上觸發 onclick
<label for="myCheckEd" class="container_radio mr-3">Nein
<input type="radio" name="gehalt" value="nein" class="required" id="nein" onclick="myFunction()">
<span class="checkmark"></span>
</label>
您可以使用onchange事件來解決顯示問題。
function myFunction(radio) { var text = document.getElementById("Gehalt"); if (radio.value == "ja"){ text.style.display = "block"; } else if (radio.value =="nein"){ text.style.display = "none"; } } <!DOCTYPE html> <html> <body> <label class="add_top_15">Gehalt (netto)</label> </br></br> <div class="form-group radio_input"> <label for="myCheck" class="container_radio mr-3">Ja <input type="radio" name="gehalt" value="ja" class="required" id="ja" onchange="myFunction(this)"> <span class="checkmark"></span> </label> <label for="myCheckEd" class="container_radio mr-3">Nein <input type="radio" name="gehalt" value="nein" class="required" id="nein" onchange="myFunction(this)"> <span class="checkmark"></span> </label> </div> </br></br> <div id="Gehalt" style="display:none" class="form-group add_top_30"> <label for="Gehalt">Gehalt (netto)</label> <input type="text" name="Gehaltt" id="Gehalt" class="form-control required"> </div> </body> </html>只需將該功能添加到 Nein 收音機即可。
我稍微縮小了代碼。
function myFunction() { var radioJa = document.getElementById("ja"); const text = document.getElementById("Gehalt"); text.style.display = radioJa.checked ? 'block' : 'none'; }
<!DOCTYPE html> <html> <body> <label class="add_top_15">Gehalt (netto)</label> </br></br> <div class="form-group radio_input"> <label for="myCheck" class="container_radio mr-3">Ja <input type="radio" name="gehalt" value="ja" class="required" id="ja" onclick="myFunction()" /> <span class="checkmark"></span> </label> <label for="myCheckEd" class="container_radio mr-3">Nein <input type="radio" name="gehalt" value="nein" class="required" id="nein" onclick="myFunction()" /> <span class="checkmark"></span> </label> </div> </br></br> <div id="Gehalt" style="display:none" class="form-group add_top_30"> <label for="Gehalt">Gehalt (netto)</label> <input type="text" name="Gehaltt" id="Gehalt" class="form-control required"> </div> </body> </html>
選擇單選按鈕時如何顯示元素，而未使用javascript選擇時如何隱藏元素？
[英]How to display an element when radio button is selected and hide it when is not selected using javascript?
表單驗證：在選擇無線電值並輸入文本消息時取消隱藏提交按鈕
[英]Form validation: un-hide submit button when a radio value is selected and text message is entered
選擇單選按鈕時圖像不透明，但需要隱藏實際按鈕
[英]Opaque images when radio button selected, but need to hide the actual button
jQuery：選擇第一個或第二個單選按鈕時顯示/隱藏Div
[英]jQuery: show / hide Div when first or second radio button is selected
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.