当单击一个复选框时,使用jQuery将类添加到包含li

Question

目的

如果单击该行内的(嵌套)复选框,则突出显示(通过添加background-color到"行" <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>

Answer 1

你可以closest用来获得最近的复选框li元素:

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

这个方法将从复选框开始冒​​泡DOM,直到找到给定选择器的匹配(li在这种情况下).

Answer 2

使用.parents([selector])

对于你想要的李

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

或者,如果您只想突出显示该行

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

或者,如果您只想突出显示单元格

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

Answer 3

你很亲密!您可以使用jQuery的.parents()方法并传入类.row.它看起来像这样:

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

编辑:

正如@showdev所提到的,如果你想要li元素,你可以这样做:

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