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

420
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">

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

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

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

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

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

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

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

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

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

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

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

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

 372