Для добавления класса к элементу при изменении его состояния "checked" в JavaScript, вы можете использовать обработчик события "change". Вот примерный код, который иллюстрирует, как это можно сделать:
<input type="checkbox" id="myCheckbox"> <label for="myCheckbox">Метка</label> <script> // Получаем ссылку на элементы DOM var checkbox = document.getElementById("myCheckbox"); var label = document.querySelector("label"); // Создаем обработчик события для checkbox function toggleClass() { if (checkbox.checked) { label.classList.add("myClass"); } else { label.classList.remove("myClass"); } } // Назначаем обработчик события "change" checkbox.addEventListener("change", toggleClass); </script> <style> .myClass { color: red; font-weight: bold; } </style>
В этом примере мы начинаем с получения ссылки на элементы DOM - чекбокс и метку. Затем мы создаем функцию toggleClass()
, которая будет добавлять или удалять класс myClass
из метки в зависимости от того, включен ли или выключен чекбокс. Эта функция вызывается при событии change
, которое происходит, когда состояние чекбокса изменяется.
Строкой .classList.add("myClass")
мы добавляем класс myClass
к метке, а .classList.remove("myClass")
- удаляем его.
Наконец, мы добавляем стилевое оформление класса myClass
внутри тега <style>
. В этом примере класс просто изменяет цвет текста на красный и добавляет жирное начертание, но вы можете изменить стили класса на свое усмотрение.
Когда вы открываете этот пример в браузере и переключаете состояние чекбокса, класс myClass
будет добавляться или удаляться из метки, что будет соответствовать изменению визуального оформления метки в соответствии с определенными стилями класса.