html,css,javaScript меняющаяся обводка блока при нажатии на checkbox

Question

у меня на странице находится блок в котором содержится input type checkbox и мне нужно сделать так чтоб когда checkbox активен(тоесть у него есть галочка) , то обводка блока в котором он находится имеет один цвет, а если checkbox не активен, то блок имеет другой цвет.

<div>
<input type="checkbox"/>
</div>

Answer 1

const toggle = () => document.querySelector('#mycheckbox').parentElement.classList.toggle('myclass')

document.querySelector('#mycheckbox').addEventListener('change', toggle);

.defaultClass {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 2px dashed;
    border-color: black;
}
.myclass {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 2px dashed;
    border-color: red;
}

<div class="defaultClass">
<input type="checkbox" id="mycheckbox">
<div>

БЛОГ НА HUSL

html,css,javaScript меняющаяся обводка блока при нажатии на checkbox

Ответы (1 шт):