这是我的代码。如果我点击 From
的单选按钮,它将显示另外 2 个选项。如果我点击 To
的单选按钮,它将显示另外 2 个选项。但是,如果我单击全天
的单选按钮,选项From
和To
应该消失。
当我点击全天
时,只有一个选项消失。我希望两者都消失。我怎样才能做到这一点?
function show1() {
document.getElementById('div1').style.display = 'none';
}
function show2() {
document.getElementById('div1').style.display = 'block';
}
function show3() {
document.getElementById('div2').style.display = 'block';
}
body {
font-family: arial;
}
.hide {
display: none;
}
p {
font-weight: bold;
}
<p>Leave</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day
<input type="radio" name="tab1" value="igottwo" onclick="show2();" /> From
<input type="radio" name="tab2" value="igottwo" onclick="show3();" /> To
<div id="div1" class="hide">
<hr>
<p>From Which Half Session You Are Not Available???</p>
<input type="radio" value="Yes" name="one"> First Session
<input type="radio" value="Yes" name="one"> Second Session
</div>
<div id="div2" class="hide">
<hr>
<p>To Which Half Session You Are Not Available???</p>
<input type="radio" value="Yes" name="two"> First Session
<input type="radio" value="Yes" name="two"> Second Session
</div>
最佳答案
您可以将两个 div
包装成一个 div
并仅显示/隐藏它。
此外,单选按钮应共享相同的名称
,以允许用户一次仅选择一个选项。
function show1() {
document.getElementById('divs').style.display = 'none';
}
function show2() {
document.getElementById('divs').style.display = 'block';
}
function show3() {
document.getElementById('divs').style.display = 'block';
}
body {
font-family: arial;
}
.hide {
display: none;
}
p {
font-weight: bold;
}
<p>Leave</p>
<input type="radio" name="tab" value="igotnone" onclick="show1();" /> Full Day
<input type="radio" name="tab" value="igottwo" onclick="show2();" /> From
<input type="radio" name="tab" value="igottwo" onclick="show3();" /> To
<div id="divs" class="hide">
<div id="div1">
<hr>
<p>From Which Half Session You Are Not Available???</p>
<input type="radio" value="Yes" name="one"> First Session
<input type="radio" value="Yes" name="one"> Second Session
</div>
<div id="div2">
<hr>
<p>To Which Half Session You Are Not Available???</p>
<input type="radio" value="Yes" name="two"> First Session
<input type="radio" value="Yes" name="two"> Second Session
</div>
</div>
关于javascript - 使用单选按钮显示/隐藏表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55415422/