не срабатывает событие change при unchecked radio button

485

31 августа 2017, 22:13

Вопрос. В данном коде:

for(const tab of tabs) {
      tab.addEventListener(`change`, () => {
        if (tab.checked) {
          user.classList.add(`main-navigation__list-item--active`);
        } else if(!tab.checked) {
          user.classList.remove(`main-navigation__list-item--active`);
        }
      })
    }

почему при клике добавляется класс, а с предыдущего при этом не снимается? Это radio-buttons, событие change. По идее при клике на один, на предыдущем тоже должно срабатывать событие, но оно не срабатывает. Только на том, который кликнули. Else if не выполняется и класс остается на предыдущем табе

Answer 1

Событие на radio-button вызывается только когда выбранный элемент меняется. При чем только 1 раз для того элемента который стал выбранным.

let numOfChanges = 0; 
const radioButtons = document.getElementsByName('radio'); 
 
for(let radio of radioButtons) { 
  radio.addEventListener('change', function() { 
    for(let radio of radioButtons) { 
      if(radio.checked) { 
        radio.classList.add('active'); 
      } else { 
        radio.classList.remove('active'); 
      } 
    } 
     
    numOfChanges++; 
    console.log(numOfChanges); 
  }); 
}

<input type="radio" name="radio" value="1"> 
<input type="radio" name="radio" value="1">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Vue.js и переменные экземпляра

Когда пытаюсь вывести thisauthors функцией clicked() выводится undefined

499

javascript

Meteor js - React vs Blaze, какие преимущества?

Конечно, я нетерпеливый, просматривая руководство Meteor + React пока вижу лишь одни недостатки перед использованием BlazeОбъясните, пожалуйста,...

468

javascript

Изменение вида продуктов через javascript

Задача заключается в следующемНужно сделать кнопку, которая переключает вид товаров на сайте(кубиками или списком)

479

javascript

Задание таймера обратного отсчета

Нужно, чтобы при получении чисел, которые указывает пользователь, они переводили своё значение в таймерНо проблема не в этом

463