@FRANZEE

Как изменить стиль label если radio button внутри него?

Не могу разобраться.
Мне нужно чтобы parent label менял свой стиль.
Решение взял отсюда - https://stackoverflow.com/questions/45338238/how-t...

html
<div class="switch-color" style="display: none;">
						<ul>
							<li class=""><span class="dot dot-black"></span><span class="color-name">Черный</span></li>
							<li class="active"><span class="dot dot-white"></span><span class="color-name">Белый</span></li>
						</ul>
					</div>
					<div class="switch-color">
						<label class="switch-color-item item-white active">Белый<input type="radio" name="radio-color" checked><span class="checkmark"></span></label>
						<label class="switch-color-item item-black">Черный<input type="radio" name="radio-color"><span class="checkmark"></span></label>
					</div>


let colors = document.getElementsByClassName("switch-color-item");

for (let i = 0; i < colors.length; i++) {
    colors[i].addEventListener("change", colorChange(colors[i]));
}

function colorChange(evt){
    let trg = evt.target;
    let trg_par = trg.parentElement;
    if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
        let prior = form.querySelector( 'label.checked input[name="' + trg.name + '"]' );
        if ( prior ) {
            prior.parentElement.classList.remove( "active" );
        }
        trg_par.classList.add( "active" );
    }
}


Конечный код:
let form = document.getElementById("orderForm");
form.addEventListener("change", ( evt ) => {
    let trg = evt.target,
        trg_par = trg.parentElement;
    if ( trg.type === "radio" && trg_par && trg_par.tagName.toLowerCase() === "label" ) {
        let prior = form.querySelector( 'label.active input[name="radio-color"]' );
        if ( prior ) {
            prior.parentElement.classList.remove( "active" );
        }
        trg_par.classList.add( "active" );
    }
}, false);


Если я удаляю старый кусок html кода который с display:none;
То все перестает работать :(
  • Вопрос задан
  • 296 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы