0

У меня есть 4 "тарифа" c input типом radio (у первого input стоит checked). Мне нужно, чтобы при смене checked на другой input переменная принимала value чекнутого инпута. У меня при загрузке страницы в консоль уходит value чекнутого первого инпута, но при клике на другой input значение нового чекнутого инпута в консоль не выводится.

                    <div class="checkbox-wrapper__tarifs">
                        <label id="pr190">
                            .calc-tarif
                                //Инф-ция
                            <input  id="val190" type="radio" class="modern-radio" value="190" name="calc-radio" checked>
                        </label>
                        <label>
                            .calc-tarif
                            <input type="radio" class="modern-radio" value="450" name="calc-radio">
                        </label>
                    </div>
                    <script>
                        const fruits = document.querySelectorAll('input[name="calc-radio"]')
                        for (const f of fruits) {
                           if (f.checked) {
                             console.log(f.value)
                                          }
                        }
                    </script>

2 ответа 2

1

"значение нового чекнутого инпута в консоль не выводится"

Нужно повесить слушатель события change...

const fruits = document.querySelectorAll('input[name="calc-radio"]');

fruits.forEach(e => {
  e.addEventListener('change', function() {
    console.log(this.value)
  })
})
<div class="checkbox-wrapper__tarifs">
  <label id="pr190">
                            .calc-tarif
                                //Инф-ция
<input  id="val190" type="radio" class="modern-radio" value="190" name="calc-radio" checked>
</label>
  <label>
                            .calc-tarif
<input type="radio" class="modern-radio" value="450" name="calc-radio">
</label>
</div>

4
  • Я плох в JS - я правильно понимаю. что в Вашем варианте переменная не принимает значение чекеда при загрузке страницы?(тоесть если оставить так как есть JS не получит значение, если чекед не менялся)
    – Burr_DI
    Commented 25 янв. 2023 в 11:49
  • Правильно понимаешь. В коде вообще нет переменной, которой присваивается значение. Ни в твоём примере, ни в моём ответе. Создай её самостоятельно, а в цикле forEach сделай проверку if(e.checked) variable = e.value; и у тебя всё получится..
    – Rudi
    Commented 25 янв. 2023 в 12:07
  • большое Вам спасибо!
    – Burr_DI
    Commented 25 янв. 2023 в 12:11
  • @Burr_DI На здоровье! :)
    – Rudi
    Commented 25 янв. 2023 в 12:12
1

Надо использовать событие на изменения радио:

const fruits = document.querySelectorAll('input[name="calc-radio"]')
let selectedValue;

for (const f of fruits) {
    f.addEventListener('change', (event) => {
        selectedValue = event.target.value;
        console.log(selectedValue);
    });
}

1
  • большое Вам спасибо!
    – Burr_DI
    Commented 25 янв. 2023 в 12:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.