当单击一个复选框时，使用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"); 

Answer 4

就像在这个Codepen

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

或者，由于复选框包含在目标li内的div内，您可以使用： Codepen

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

Answer 5

只需添加另一个.parent()将已checked类添加到行（父项的父项）：

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

请参阅此CodePen分支 。