@kpa18

Как получить значение (value) выбранной радио кнопки по атрибуту name с помощью JS?

Есть несколько радио кнопок:
<form id="mainForm" name="mainForm">
  <input type="radio" name="rate" value="1"> Раз
  <input type="radio" name="rate" value="2"> Два
  <input type="radio" name="rate" value="3"> Три 
</form>
<span id="result"></span>

Необходимо получить value выбранной радио-кнопки по атрибуту name для дальнейшей работы с ним.
Вот как делаю я:
<script>
                    var text = ["BASIC", "STANDART", "ADVANCED"];
document.querySelector('input[name="rate"]').addEventListener("change", function(){
    if (this.value == 1) {
      document.getElementById('result').innerHTML = text[0]; }
else if (this.value == 2) {
      document.getElementById('result').innerHTML = text[1]; }
      else if (this.value == 3) {
      document.getElementById('result').innerHTML = text[2]; }
});
        </script>

По итогу выводится только самое первое значение, а другие игнорируются... В консоли никаких ошибок не выдает.
  • Вопрос задан
  • 1044 просмотра
Пригласить эксперта
Ответы на вопрос 1
Simkav
@Simkav
Потому что у вас стоит обработчик только на 1 инпут
querySelector выдаст вам первое найденое совпадение, вам нужно юзать querySelectorAll
Рабочий код, но я бы передалал)
var text = ['BASIC', 'STANDART', 'ADVANCED'];
const inputs = document.querySelectorAll('input[name="rate"]');
inputs.forEach((item) => {
  item.addEventListener('change', function () {
    const {value} = this;
    if (value == 1) {
      document.getElementById('result').innerHTML = text[0];
    } else if (value == 2) {
      document.getElementById('result').innerHTML = text[1];
    } else if (value == 3) {
      document.getElementById('result').innerHTML = text[2];
    }
  });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы