[英]show/hide Form element using radio button
Here is my code. 这是我的代码。 If I click on
From
's radio button, it will display 2 more options. 如果单击
From
的单选按钮,它将显示另外2个选项。 If I click on To
's radio button, it will display 2 more options. 如果我单击
To
的单选按钮,它将显示另外2个选项。 But if I click on Full Day
's radio button, options From
and To
should disappear. 但是,如果我单击
Full Day
”单选按钮,则“ From
和“ To
选项应消失。
When I click on Full Day
, only one option disappears. 当我单击
Full Day
,只有一个选项消失。 I want both to disappear. 我要两个都消失。 How can I do this?
我怎样才能做到这一点?
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>
You may wrap the two div
s into one div
and show/hide that only. 您可以将两个
div
包装成一个div
,然后仅显示/隐藏该div
。
Moreover, radio buttons should share the same name
to allow users to choose only one option at a time. 此外,单选按钮应共享相同的
name
以允许用户一次仅选择一个选项。
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>
Firstly the name of all the radio button should be same. 首先,所有单选按钮的名称应相同。 So, it can select one at a time.
因此,它可以一次选择一个。 second the div you are displaying at the same time hide the other div.
第二个您同时显示的div隐藏另一个div。
function show1() { document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display = 'none'; } function show2() { document.getElementById('div2').style.display = 'none'; document.getElementById('div1').style.display = 'block'; } function show3() { document.getElementById('div1').style.display = 'none'; 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="tab" value="igottwo" onclick="show2();" /> From <input type="radio" name="tab" 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.