【问题标题】：How can I show messages depending on selected radio buttons?如何根据选定的单选按钮显示消息？
【发布时间】：2020-04-27 14:39:22
【问题描述】：

我正在努力寻找如何根据表单中的两个选项显示信息的方法。

我的意思是，“选择性别”中有两个选项。如果他们选择“男性”，那么应该出现一个段落。如果他们选择“女性”，那么网站上应该出现另一个段落。我该怎么做？

这是表单代码：

<form>
    Select Gender
    <br />
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <br />
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
    <br />
    <br />
</form>

【问题讨论】：

您需要为单选按钮添加一个事件监听器，并根据它们的值更改文本。

标签： javascript forms event-handling radio-button

【解决方案1】：

仅使用 CSS

请注意，我在您的输入和.popup-descriptions 周围添加了divs，否则这不起作用。

.popup-description{
  display: none;
}

[type="radio"]:checked ~ label ~ .popup-description{
  display: block;
}

<form>
  Select Gender
  <div>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <p class="popup-description">
      This text is shown when the user selects <b>male</b>.
    </p>
  </div>
  <div>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
    <p class="popup-description">
      This text is shown when the user selects <b>female</b>.
    </p>
  </div>
</form>

在 jQuery 中使用 javascript

请注意，我在您的inputs 中添加了value，否则这不起作用。

$(document).ready(function(){
  $("[name='gender']").on("change", function(){
    var v = $(this).val();
    var n = $(this).attr("name");
    $(".popup-description[data-for='" + n + "']").hide();
    $(".popup-description[data-for='" + n + "'][data-selected-value='" + v + "']").show();
  });
});

.popup-description{
  display: none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Select Gender
  <br />
  <input type="radio" name="gender" id="male" value="male">
  <label for="male">Male</label>
  <p class="popup-description" data-for="gender" data-selected-value="male">
    This text is shown when the user selects <b>male</b>.
  </p>
  <br />
  <input type="radio" name="gender" id="female" value="female">
  <label for="female">Female</label>
  <p class="popup-description" data-for="gender" data-selected-value="female">
    This text is shown when the user selects <b>female</b>.
  </p>
  <br />
</form>

使用纯javascript

请注意，我在您的inputs 中添加了value，否则这不起作用。

(function(){
  var radios = document.querySelectorAll("[name='gender']");
  if(radios !== null){
    for(var i = 0; i < radios.length; i++){
      var el = radios.item(i);
      el.addEventListener("change", function(){
        if(this.checked){
          var v = this.value;
          var n = this.name;
          var h = document.querySelectorAll(".popup-description[data-for='" + n + "']");
          
          if(h !== null){
            for(var j = 0; j < h.length; j++){
              var e = h.item(j);
              if(e.getAttribute("data-selected-value") == v){
                e.style.display = "block";
              }
              else{
                e.style.display = "none";
              }
            }
          }
        }
      });
    }
  }
})();

.popup-description{
  display: none;
 }

<form>
  Select Gender
  <br />
  <input type="radio" name="gender" id="male" value="male">
  <label for="male">Male</label>
  <p class="popup-description" data-for="gender" data-selected-value="male">
    This text is shown when the user selects <b>male</b>.
  </p>
  <br />
  <input type="radio" name="gender" id="female" value="female">
  <label for="female">Female</label>
  <p class="popup-description" data-for="gender" data-selected-value="female">
    This text is shown when the user selects <b>female</b>.
  </p>
  <br />
</form>

【讨论】：