當單擊一個復選框時，使用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分支 。