Как я могу показывать сообщения в зависимости от выбранных переключателей? - PullRequest
Новая
       36

Как я могу показывать сообщения в зависимости от выбранных переключателей?

1 голос
/ 27 апреля 2020

Я изо всех сил пытаюсь найти способ отображения информации на основе двух параметров в формах.

Я имею в виду, что в «Выбор пола» есть два параметра. Если они выбирают «Мужской», то должен появиться абзац. Если они выбирают «Женщина», то на сайте должен появиться еще один абзац. Как я могу это сделать?

Это код формы: 

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

1 Ответ

0 голосов
/ 27 апреля 2020

Используйте CSS только

Обратите внимание, что я добавил div s вокруг ваших входов и .popup-description s, в противном случае это не работает. 

.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

Обратите внимание, что я добавил value к вашим input с, в противном случае это делает не работает. 

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

Обратите внимание, что я добавил value к вашим input с, в противном случае это делает не работает. 

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