Question

这是我的代码。如果单击this.setState(lens("items", mapIndex(-1, it => ({ ...it, filter: { refine: true }}))));的单选按钮，它将显示另外2个选项。如果单击From的单选按钮，它将显示另外2个选项。但是，如果我单击To的单选按钮，则选项Full Day和From应该会消失。

当我单击To时，只有一个选项消失。我要两个都消失。我该怎么办？

Full Day

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;
}

Answer 1

您可以将两个div包装成一个div，然后仅显示/隐藏。

此外，单选按钮应该共享相同的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&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>

Answer 2

首先，所有单选按钮的名称应相同。因此，它可以一次选择一个。第二个您同时显示的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&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>

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

2 个答案: