选择/取消选择单选按钮时显示/隐藏表单
可以使用以下代码来帮助您。（参见片段）
当选择“Ja”时，它应该显示一个用于输入信息的框。
如果选择“Nein”，则不应显示任何内容。
当我选择 ne 时，输入框仍然显示。
在此先感谢您的帮助！
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>
慕后森3回答
-
拉风的咖菲猫
是的，您忘记在“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> -
慕慕森
只需将功能添加到 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> -
MM们
您可以使用该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>
随时随地看视频慕课网APP
相关分类
JavaScript