HTML 单选按钮操作 - 打开输入答案

【问题标题】：HTML Radio Button Action - open inputHTML 单选按钮操作 - 打开输入
【发布时间】：2021-11-27 02:46:05
【问题描述】：

我只想在单选按钮为YES 时显示“我们很抱歉...” 消息和“黑框”，否则不要'不显示。

我需要只用 JavaScript 来做吗，还是只用 HTML 就可以？

<h3 >Did you encounter any issues during your stay?</h3>

<label class="container">Yes
    <input type="radio" name="radio">
        <span class="checkmark"></span>
</label>

<label class="container">No
    <input type="radio" checked="checked" name="radio">
        <span class="checkmark"></span>
</label>

<h3 >We’re so sorry to hear this.
    <br>
    If you would like to share, please tell us what happened.
</h3>

<input type="text" id="problem" name="problem" style = "height: 200px; background-color: #a4acba; border-color: black;">

提前致谢。

【问题讨论】：

你必须使用 JavaScript input 或 change 事件，它应该设置一个 CSS 类。我更喜欢input，因为它不需要在大多数浏览器中出现blur。
你好@PavolBujna！你能解释一下“黑匣子”是什么意思吗？
我的意思是“文本输入”，底部有一个黑框

标签： javascript html css radio-button

【解决方案1】：

在单选按钮上添加一个change 事件侦听器，检查值是否为YES，如果是，则显示div：

document.querySelectorAll('input[type="radio"][name="radio"]').forEach(e => {
  e.addEventListener('change', function() {
    if (this.value == "YES") {
      errorexpanded.style.display = "block";
    } else {
      errorexpanded.style.display = "none";
    }
  })
})

#errorexpanded {
  display: none;
}

<h3>Did you encounter any issues during your stay?</h3>

<label class="container">Yes
      <input type="radio" name="radio" value="YES">
      <span class="checkmark"></span>
    </label>

<label class="container">No
      <input type="radio" checked="checked" name="radio" value="NO">
      <span class="checkmark"></span>
    </label>

<div id="errorexpanded">
  <h3>We’re so sorry to hear this.<br> If you would like to share, please tell us what happened.</h3>

  <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
</div>

【讨论】：

【解决方案2】：

希望这可以提供一些关于如何使用 javascript 完成此任务的见解。

我首先将你想要隐藏的部分包裹在一个 div 中，并做了一个内联样式以使显示不显示。

我为每个单选按钮添加了一个事件侦听器，如果单击它的父级文本是“是”，那么我们将显示该元素。否则，我们隐藏元素。

<h3> Did you encounter any issues during your stay ? </h3>

<label class="container"> Yes <input type="radio" name="radio">
  <span class="checkmark">
  </span>
</label>

<label class="container"> No <input type="radio" checked="checked" name="radio">
  <span class="checkmark">
  </span>
</label>

<div style="display: none;" class="showIfNo">
  <h3>
    We’ re so sorry to hear this. <br>
    If you would like to share, please tell us what happened.
  </h3>

  <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
</div>

<script type="text/javascript">
  document.querySelectorAll("input[type='radio']")
    .forEach(radio => {
      radio.addEventListener("click", e => {
        const selected = e.target.parentElement.innerText.trim();
        console.log(selected);
        if (selected === "Yes") document.querySelector(".showIfNo").style.display = "block";
          else document.querySelector(".showIfNo").style.display = "none";
      });
    });
</script>

【讨论】：

【解决方案3】：

实际上，您只能使用 CSS 来实现这一点（如果您可以这样做的话）。您只需稍微更改标记：

<label class="container">No
  <span class="checkmark"></span>
  <input id="no" type="radio" checked="checked" name="radio" value="NO">
  <div id="errorexpanded">
    <h3>We’re so sorry to hear this.<br> If you would like to share, please tell us what happened.</h3>

    <input type="text" id="problem" name="problem" style="height: 200px; background-color: #a4acba; border-color: black;">
  </div>
</label>

在 CSS 中，您有一个伪选择器 :checked，它适用于所有类型的输入框，例如复选框、单选按钮或选项。所以你可以这样做：

#errorexpanded {
  display: none;
}

#no:checked ~ #errorexpanded {
  display: block;
}

【讨论】：