javascript - 如何在复选框上使用addClass仅将div中的ID作为目标

我试图只针对与复选框关联的div。现在，我正在使用的脚本仅更改具有taskList的ID的第一个div的类，而不是复选框所在的类。

$('input:checkbox').change(function () {
    if ($(this).is(":checked")) {
        $('#taskList').addClass("complete");
    } else {
        $('#taskList').removeClass("complete");
    }
});

最佳答案

每个元素的id应该是唯一的。使用类taskList代替，如下所示。

$('input:checkbox').change(function () {
    if ($(this).is(":checked")) {
        $(this).closest('.taskList').addClass("complete");
    } else {
        $(this).closest('.taskList').removeClass("complete");
    }
});

.complete {
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskList">
    <input type="checkbox"/>
</div>
<div class="taskList">
    <input type="checkbox" />
</div>