如何根据选定的单选按钮显示消息？

Question

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

我的意思是，"Select Gender"中有两个选项。如果他们选择 "Male"，那么应该出现一个段落。如果他们选择 "Female"，那么网站上应该会出现另一个段落。我该怎么做？

这是表单代码：

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

Answer 1

仅使用 CSS

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

.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>

将 javascript 与 jQuery

结合使用

请注意，我在您的 input 中添加了一个 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

请注意，我在您的 input 中添加了一个 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>

如何根据选定的单选按钮显示消息？

How can I show messages depending on selected radio buttons?

javascript

forms

event-handling

radio-button

仅使用 CSS

将 javascript 与 jQuery

使用普通 javascript