Как вывести значения из input type="radio" при изменении checked

Рейтинг: -1Ответов: 1Опубликовано: 30.03.2023

Сразу скажу, что в js не разбираюсь, поэтому и обращаюсь за помощью. Нашел код в интернете и адаптировал под себя:

$(document).ready(function() {
    var one = $('#one input[type="radio"]:checked').map(function() {
      return $(this).val();
    }).get();
    var two = $('#two input[type="radio"]:checked').map(function() {
      return $(this).val();
    }).get();
    
    $(".result").append("Результат: "+one+"-"+two);
});
input {
    margin: 6px;
}

#one{
  margin-bottom:30px;
}
.result{
  margin-top:20px;
  background:#000;
  color:#fff;
}
<!doctype html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <body>
    <form>
      <div id="one">
        <div>
          <input type="radio" id="bike" name="vechicle" value="bike" checked>
          <label for="bike">Bike</label>
        </div>
         <div>
          <input type="radio" id="scooter" name="vechicle" value="scooter">
          <label for="scooter">Scooter</label>
        </div>
        <div>
          <input type="radio" id="auto" name="vechicle" value="auto">
          <label for="auto">Auto</label>
        </div>
      </div>
      <div id="two">
        <div>
          <input type="radio" id="red" name="color" value="red">
          <label for="red">Red</label>
        </div>
         <div>
          <input type="radio" id="blue" name="color" value="blue">
          <label for="blue">Blue</label>
        </div>
        <div>
          <input type="radio" id="black" name="color" value="black" checked>
          <label for="black">Black</label>
        </div>
        <div>
          <input type="radio" id="white" name="color" value="white">
          <label for="white">White</label>
        </div>
      </div>
    </form>
    <div class="result"></div>
  </body>
</html>

Все работает как и должно, т.е. при загрузке страницы - js подтягивает значения поля с атрибутом checked из разных групп radio и выводит результат объединив значения полей. Но, я не понимаю, как сделать, чтобы результат менялся на загруженной странице, если я выберу другой radio.

javascript html jquery
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

$(document).ready(updateResult);

$('input[name="vechicle"], input[name="color"]').on("change", updateResult);

function updateResult() {
  const one = $('input[type="radio"][name="vechicle"]:checked').val();
  const two = $('input[type="radio"][name="color"]:checked').val();
  
  $(".result").text("Результат: "+one+"-"+two);
}
input {
    margin: 6px;
}

#one{
  margin-bottom:30px;
}
.result{
  margin-top:20px;
  background:#000;
  color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div id="one">
    <div>
      <input type="radio" id="bike" name="vechicle" value="bike" checked>
      <label for="bike">Bike</label>
    </div>
     <div>
      <input type="radio" id="scooter" name="vechicle" value="scooter">
      <label for="scooter">Scooter</label>
    </div>
    <div>
      <input type="radio" id="auto" name="vechicle" value="auto">
      <label for="auto">Auto</label>
    </div>
    </div>
    <div id="two">
    <div>
      <input type="radio" id="red" name="color" value="red">
      <label for="red">Red</label>
    </div>
     <div>
      <input type="radio" id="blue" name="color" value="blue">
      <label for="blue">Blue</label>
    </div>
    <div>
      <input type="radio" id="black" name="color" value="black" checked>
      <label for="black">Black</label>
    </div>
    <div>
      <input type="radio" id="white" name="color" value="white">
      <label for="white">White</label>
    </div>
  </div>
</form>
<div class="result"></div>