单击内部复选框时，使用jQuery将类添加到包含li

Posted 2023-05-08

【中文标题】单击内部复选框时，使用jQuery将类添加到包含li

【英文标题】：Using jQuery to add class to containing li when a checkbox inside is clicked

【发布时间】：2016-01-28 22:59:22

【问题描述】：

目标

如果单击了“行”<li>，则突出显示（通过添加background-color 到）该行内的（嵌套）复选框。

背景

在此功能中，我正在开发文件管理系统的界面。当用户单击复选框时，他们可以删除所有选中的文件。为了给他们视觉反馈，我希望他们选择的所有文件都具有背景颜色。这将通过单击一个复选框来完成，然后我希望 <li> 被着色。

当前状态

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

代码

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

【问题讨论】：

您可能会发现 jQuery 的 closest() 很有帮助，例如closest('li').

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

【参考方案1】：

您可以使用closest 来获取最接近的复选框li 元素：

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

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

【讨论】：

谢谢，这在我写问题的上下文中回答了我，所以我接受了。但是在生产中，我必须使用$(this).closest('.row').toggleClass("checked"); 才能使样式接近规范。关于.closest 的课程绝对有帮助。

【参考方案2】：

使用 .parents([selector])

为了你想要的这个

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

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

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

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

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

【讨论】：

很好的反馈。 <li> 的解决方案在上下文中。但是.row 的解决方案是从样式的角度给我最好的结果。谢谢。

【参考方案3】：

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

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

编辑：

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

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

【参考方案4】：

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

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

看到这个CodePen fork。

【参考方案5】：

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