繁体   English   中英

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

[英]Using jQuery to add class to containing li when a checkbox inside is clicked

目的

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

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

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

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

使用.parents([selector])

对于你想要的李

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

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

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

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

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

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

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

编辑:

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

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

就像在这个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");
});

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

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

请参阅此CodePen分支

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM