javascript - 使用单选按钮显示/隐藏表单元素

Question

这是我的代码。如果我点击 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&nbsp;
  <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&nbsp;
  <input type="radio" value="Yes" name="two"> Second Session
</div>

Answer 1

您可以将两个 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&nbsp;
    <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&nbsp;
    <input type="radio" value="Yes" name="two"> Second Session
  </div>
</div>