Как применить class?

Question

[Rem36]

Я дико извиняюсь, сделал так.

window.addEventListener('DOMContentLoaded', function(){
    document.querySelector("#input-checkbox").addEventListener('change', function(){
        document.querySelector('#color-label-editions').classList.toggle('active-label-color')
    })
});

У меня много checkbox-ов и для каждого я предполагаю делать id не правильное решение, может ошибаюсь.

Попробовал сделать через class, но не получается почему-то. Что не так?

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll("div.input-checkbox").addEventListener('change', function(){
        document.querySelectorAll('div.color-label-editions').classList.toggle('active-label-color')
    })
});

Comments

[v3shin]

А если так?

- document.querySelectorAll('div.color-label-editions').classList.toggle('active-label-color')
+ this.closest('div.color-label-editions').classList.toggle('active-label-color')

[Rem36]

v3shin, К сожалению не работает((

[v3shin]

Rem36, какова структура html?

[Rem36]

v3shin,

<div class="section__editions-checkbox-wrap">
                        <label class="label-checkbox-editions color-label-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox input-checkbox">
                            Бестселлеры
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions color-label-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox input-checkbox">
                            Искусство
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Архитектура
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Дизайн
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Мода
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Детям
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Художественная литература
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Публицистика
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Путеводители
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Философия
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Учебная литература
                            <span></span>
                        </label>
                        <label class="label-checkbox-editions">
                            <input type="checkbox" name="" class="section__editions-checkbox">
                            Журналы и газеты
                            <span></span>
                        </label>
                    </div>

[v3shin]

Rem36, логично, что не работает. Проверьте селекторы.

[Rem36]

v3shin, Извините может я слепой, я вижу что нормальные селекторы. Я у первых двух сделал сделал классы для проверки у остальных не делал если вы про это.

[v3shin]

Rem36, div.input-checkbox соответствует div, а не input. div.color-label-editions тоже соответствует div, а вы используете label. Уберите div из селекторов.

[Rem36]

v3shin, Спасибо за помощь, хотел выпендрится, но мозгов не хватило. Сделал просто на css.

Answer 1

[Simkav]

querySelector возвращает один элемент в данном случае все сработает, но querySelectorAll возвращает коллекцию NodeList к который вы пытаетесь добавить слушатель и класс

Comments

[Rem36]

я правильно понимаю что ошибка в последней строчке? или вообще не правильно все?

window.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll("div.input-checkbox").addEventListener('change', function(){
        document.querySelectorAll('div.color-label-editions').classList.toggle('active-label-color')