单击内部复选框时，使用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]）

对于你想要的li

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

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

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

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

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

Answer 3

你非常接近！您可以使用jQuery的.parents（）方法并传入类.row。它看起来像这样：

TempRepo

编辑：

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

TempRepo

Answer 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");
});

Answer 5

只需添加另一个.parent()即可将checked类添加到该行（父级的父级）中：

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

请参阅此CodePen fork。