Использование jQuery для добавления класса к содержанию li при нажатии флажка внутри

Цель

Выделите (добавив background-color to) "row" <li>, если щелкнуть флажок (вложенной) внутри этой строки.

Фон

В этой функции я работаю над интерфейсом для системы управления файлами. Когда пользователь нажмет на этот флажок, они смогут удалить все проверенные файлы. чтобы дать им визуальную обратную связь, я хочу, чтобы все их выбранные файлы имели цвет фона. Это будет сделано, щелкнув флажок, затем я хочу, чтобы цвет <li> был окрашен.

Текущее состояние

Я нашел различные полезные ответы на stackoverflow, но имел пробел в знаниях и пытался заполнить это. Большинство ответов используют родительский элемент. Но это только помогает мне, окрашивая этого конкретного родителя, который имеет флажок.

код

У меня есть эта демонстрация на codepen

JQuery

$("#this-list :checkbox").on('click', function(){
    $(this).parent().toggleClass("checked");
});

CSS

.checked {
    background: red;
}

HTML

<div class="container">
    <ul id="this-list">

        <li>
            <div class="row">
                <div class="col-md-2">
                    <input type="checkbox" />
                    song.mp3
                </div>
                <div class="col-md-2">
                    2011
                </div>
                <div class="col-md-2">
                    1 gb
                </div>
                <div class="col-md-2">
                    2 min
                </div>
            </div>
        </li>

    <!-- More <li>s -->
    </ul>
</div>

Ответы

Ответ 1

вы можете использовать closest для получения ближайших флажков li:

$("#this-list :checkbox").on('click', function(){
    $(this).closest('li').toggleClass("checked");
});

этот метод выдувает DOM, начиная с флажка, пока не найдет совпадение для данного селектора (li в этом случае).

Ответ 2

Использовать .parents([селектор])

Для li вы хотите это

$(this).parents('li').toggleClass("checked");

Или, если вам нужна только выделенная строка

$(this).parents('.row').toggleClass("checked");

Или, если вы хотите, чтобы выделенная ячейка была выделена

$(this).parents('.col-md-2').toggleClass("checked");

Ответ 3

Вы очень близки! Вы можете использовать метод .parents() jQuery и пройти в классе .row. Это будет выглядеть так:

$("#this-list :checkbox").on('click', function(){
    $(this).parents(".row").toggleClass("checked");
});

ИЗМЕНИТЬ:

Как отметил @showdev, если вы хотите элемент li, вы можете просто сделать:

$(this).parents("li").toggleClass("checked");

Ответ 4

Как в этом Codepen

$("#this-list :checkbox").on('click', function(){
    $(this).closest("li").toggleClass("checked");
});

В качестве альтернативы, поскольку флажок содержится внутри div, который находится внутри целевого li, вы можете использовать: Codepen

$("#this-list :checkbox").on('click', function(){
   $(this).parent().parent().toggleClass("checked");
});

Ответ 5

Просто добавьте еще один .parent(), чтобы добавить класс checked в строку (родительский элемент родителя):

$(this).parent().parent().toggleClass("checked");

Смотрите CodePen fork.