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

Objective

Highlight (by adding a background-color to) the "row" <li> if a (nested) checkbox inside that row is clicked.

如果单击该行内的(嵌套)复选框,则突出显示(通过添加背景颜色)“row”

。

Background

In this feature I am working on the interface for a file management system. When a user clicks the checkbox they can then delete all the files checked. to give them visual feedback, i want all of their selected files to have a background color. This will be done by clicking a checkbox, then i want the <li> to be colored.

在这个功能中,我正在研究文件管理系统的界面。当用户单击该复选框时,他们可以删除所有已检查的文件。为了给他们视觉反馈,我希望他们所有选择的文件都有背景颜色。这将通过单击复选框完成,然后我希望

被着色。

Current state

I found various helpful answers on * but have a gap in knowledge and trying to fill that in. Most answers use the parent element. But that only helps me by coloring that specific parent that holds the checkbox.

我在*上找到了各种有用的答案,但在知识方面存在差距并试图填补它。大多数答案使用父元素。但这只能通过着色持有该复选框的特定父级来帮助我。

Code

I have this demo on codepen

我在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>

5 个解决方案

#1

you could use closest to get the closest checkboxs li element:

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

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

this method will bubble up the DOM starting from the checkbox until it finds a match for the given selector (li in this case).

此方法将从复选框开始冒泡DOM,直到找到给定选择器的匹配项(在本例中为li)。

#2

Use .parents([selector])

For the li you want this

对于你想要的李

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

Or if you only want the row highlighted

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

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

Or if you only want the cell highlighted

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

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

#3

You are very close! You can use the .parents() method of jQuery and pass in the class .row. It would look like this:

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

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

EDIT:

As @showdev mentioned, if you want the li element, you can just do:

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

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

#4

Simply add another .parent() to add the checked class to the row (the parent of the parent):

只需添加另一个.parent()将已检查的类添加到行(父项的父项):

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

See this CodePen fork.

看到这个CodePen fork。

#5

As in this Codepen

就像在这个Codepen

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

Alternatively, since the checkbox is contained inside a div which is inside the target li you can use: Codepen

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

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

#1