Javascript单选按钮显示和隐藏字段
Javascript单选按钮显示和隐藏字段
提问于 2020-07-30 17:20:35
嗨，我将尝试只给出所需的信息，我有一个带有3个单选按钮的div容器。I "rad1"，"rad2"，"rad3“我在一个表单中有2个文本字段，I为"textField1”，"textField2“。
我想根据所单击的单选按钮显示不同的textFields。
如果("rad1“被点击)我想显示"textField1”
如果("rad2“被点击)我想显示"textField2”
如果(单击了rad3/没有单击任何内容)，我想将两者都隐藏起来。
这是我的JavaScript，我认为可以工作，但没有。
fieldShower();
function fieldShower() {
if (document.getElementById('rad1').checked) {
document.getElementById('textField1').style.display = 'block';
document.getElementById('textField2').style.display = 'none';
} else if(document.getElementById('rad2').checked) {
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'block';
} else {
//hide both
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'none';
}
}回答 2
Stack Overflow用户
发布于 2020-07-30 17:40:08
您必须在html或JS代码中对输入字段设置onClick-event。为了简单起见，我给所有3个单选按钮起了相同的名字，所以每次只有一个单选按钮可以同时点击。
function fieldShower() {
if (document.getElementById('rad1').checked) {
document.getElementById('textField1').style.display = 'block';
document.getElementById('textField2').style.display = 'none';
} else if(document.getElementById('rad2').checked) {
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'block';
} else {
//hide both
document.getElementById('textField1').style.display = 'none';
document.getElementById('textField2').style.display = 'none';
}
}<input type="radio" id="rad1" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad2" name="myRadio" onClick="fieldShower()">
<input type="radio" id="rad3" name="myRadio" onClick="fieldShower()">
<div id="textField1">Text1</div>
<div id="textField2">Text2</div>
Stack Overflow用户
发布于 2020-07-30 17:44:15
希望这个示例能帮助你：
var ex1 = document.getElementById('rad1');
var ex2 = document.getElementById('rad2');
var ex3 = document.getElementById('other');
var txt1 = document.getElementById('fname');
var txt2 = document.getElementById('lname');
ex1.onclick = handler;
ex2.onclick = handler1;
ex3.onclick = handler2;
function handler(){
txt1.type='show';
txt2.type='hidden';
}
function handler1(){
txt2.type='show';
txt1.type='hidden';
}
function handler2(){
txt1.type='hidden';
txt2.type='hidden';
} textField1:<input type="hidden" id="fname" name="fname"><br><br>
textField2:<input type="hidden" id="lname" name="lname"><br><br>
<input type="radio" id="rad1" name="gender" value="male">
<label for="rad1">rad1</label><br>
<input type="radio" id="rad2" name="gender" value="female">
<label for="rad2">rad2</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">rad3</label>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63170054
复制相关文章
相似问题
腾讯云开发者
