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

Question

I am trying to only target the div associated with the checkbox. Right now the script I am using only changes the class of the first div with the ID of taskList instead of the one where the checkbox is located.

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

Answer 1

id should be unique each element. Use class taskList instead like following.

 $('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> 

Answer 2

you should us closest over here.

Suppose you have html like this:-

<div class="taskList">
    <input type="checkbox"/>
</div>
<div class="taskList">
    <input type="checkbox" />
</div

Now what colsest will do is, it goes for each element in the set, get the first element that matches the selector by testing the element itself.

so on check ( change ) you should do,

$(this).closest('.taskList').addClass("yourClass");

Full code goes,

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

Hope it helps!