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

По итогу выводится только самое первое значение, а другие игнорируются... В консоли никаких ошибок не выдает.
  • Вопрос задан
  • 92 просмотра
Пригласить эксперта
Ответы на вопрос 2
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];
    }
  });
});
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Попробуйте переписать на "click".

JS:
const result = document.getElementById( 'result' );
const mainForm = document.getElementById( 'mainForm' );
const inputs = mainForm.querySelectorAll( '[name="rate"]' );
const text = ["BASIC", "STANDART", "ADVANCED"];

inputs.forEach( ( input, i ) => {
	input.addEventListener( 'click', () => {
        // тут обработчик клика по чекбоксу
  	result.innerHTML = `${input.value} | ${text[i]}`;
  });
});
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Минск
от 2 800 до 3 300 $
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект