Выбор радиокнопок на Javascript?

Question

[Михаил]

всем привет!
у меня почему-то не работает такой код.
Есть 4 радиокнопки. У каждой из них есть label - в виде кнопки.
У label класс .radio-inline.
Изначально все label-ы белые.
При выборе радиокнопки ее label должен стать зеленым.
Потом при выборе другой радиокнопки выбранная стать зеленой, а та, которая была выбрана - стать красной. И т.д. Но получается что все они становятся зелеными. И красными не становятся.
Не понятно почему. Срабатывает Event "change" , т.е. активный становится неактивным, и при проверке на его активность должен присваиваться цвет.

let radioButtons = document.querySelectorAll('.radio-line .radio-inline input');

for ( let i=0; i<radioButtons.length; i++ ){
    radioButtons[i].addEventListener('change', () => {
        if ( radioButtons[i].checked ){
            radioButtons[i].parentElement.style = 'background:green';
        }else{
            radioButtons[i].parentElement.style = 'background:red';
        }
        
    })
}

Подскажите, в чем может быть проблема, и как исправить?

Answer 1

[Stalker_RED]

Событие change происходит только на том элементе, который был выбран, а на том где выбор "слетел" не происходит ничего.
Можно закостылить, запоминая предыдущий выбраный элемент.

Comments

[Михаил]

хорошее решение, только если у нас изначально не выбран ни один элемент ..

[Stalker_RED]

Михаил, то придется добавить проверку.

Answer 2

[Karpion]

Я не вижу ошибок. Попробуйте поиграть программой - например, погонять цикл не от нуля до radioButtons.length, а меньший диапазон. Попробуйте присвоить цвет типа
0x8F8F00+(i*255/radioButtons.length)
чтобы цвет становился разный.

Или вот гипотеза:
Переменная i определена в момент установки обработчика. А в момент срабатывания события 'change' она имет какое-то значение, оставшееся с прежних выполнений.

Answer 3

[v3shin]

Полагаю, дело в том, что обработчик ссылается на radioButtons[i], а i имеет видимость внутри цикла. Есть два варианта: либо внутри обработчика отталкиваться от event.target, либо навешивать обработчик внутри замыкания.