почему после отработки js функции CSS-стили перестают работать?

Question

Вот что я имею

function pushFirstInputToo() {
    let element = document.querySelector('#input1');
    element.toggleAttribute('checked');
}

document.addEventListener('DOMContentLoaded', function() {
    let element = document.querySelector('#input2');
    element.addEventListener('click', pushFirstInputToo);
})

input[type="checkbox"] {
    display: none;
}

label {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    font-size: 20px;
}

label:before {
    display: inline-block;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
}

input[type="checkbox"]:checked + label:before {
    content: "\2713";
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <input type="checkbox" id="input1">
        <label for="input1">Первый input</label>
        <input type="checkbox" id="input2">
        <label for="input2">Второй input</label>
        <script src="test.js"></script>
    </body>
</html>

Проблема следующего характера. Пока Первый input не нажимается - нажатия на Второй input или создают или убирают галочки с обоих квадратиков сразу. Однако стоит хоть раз нажать на Первый input - галочка у Первого input-а перестает реагировать на изменения в <input type="checkbox" id="input1">

вот тому подтверждение

Вопрос: Почему CSS-стили перестают реагировать на checked аттрибут и как заставить галочку продолжать включаться после нажатия на Первый input при нажати на Второй input???

БЛОГ НА HUSL

почему после отработки js функции CSS-стили перестают работать?

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