Changing class for the <li> when checkbox of each <li> is checked

Question

Im working on the li which contain checkbox for each list-item-group. When i click on the checkbox in each of the list, it should addClass for the list but it addClass for all of my list even i only checked one of the checkbox. here is my code. I want addclass only applied on itself li instead of applying all addclass to all the li

<ul class="sortable-list taskList list-unstyled ui-sortable">
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.1
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.2
        </li>
        <li class="ui-sortable-handle">
            <div class="checkbox checkbox-custom checkbox-single pull-right">
                <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
                <label>Normal</label>
            </div>
            No.3
        </li>
    </ul>

and this is my jquery

<script>
    $('input.cbx').on('change', function () {
        if ($(this).is(":checked")) {
            $('.ui-sortable li').addClass("task-warning");
        } else {
            $('.ui-sortable li').removeClass("task-warning");
        }
    });
</script>

Answer 1

You need to find the closest li element to $(this) to apply the class to:

  $('input.cbx').on('change', function () { if ($(this).is(":checked")) { $(this).closest('li').addClass("task-warning"); } else { $(this).closest('li').removeClass("task-warning"); } }); 

 .task-warning { background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sortable-list taskList list-unstyled ui-sortable"> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.1 </li> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.2 </li> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.3 </li> </ul> 

Answer 2

You need to $(this).addClass("task-warning"); to get that particular checkbox.

 $('input.cbx').on('change', function() { if ($(this).is(":checked")) { $(this).parent().addClass("task-warning"); // $(this).closest('li').addClass("task-warning"); for li } else { $(this).parent().removeClass("task-warning"); // $(this).closest('li').removeClass("task-warning"); for li } }); 

 .task-warning { background: orange; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <ul class="sortable-list taskList list-unstyled ui-sortable"> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.1 </li> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.2 </li> <li class="ui-sortable-handle"> <div class="checkbox checkbox-custom checkbox-single pull-right"> <input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx"> <label>Normal</label> </div> No.3 </li> </ul> 

Answer 3

That is expected as the selector you are using .ui-sortable li selects all li items inside of the list. You need to refactor how your code works. I would recommend looping through the list and removing the class when its not checked. Something like this:

(PS. I dont know Jquery too well so i wrote it in vanilla JavaScript)

$('input.cbx').on('change', function () {
        let list_items = document.querySelectorAll(".ui-sortable li");
        for (let i = 0; i < list_items.length; i++) {
            if (list_items[i].childNodes[1].childNodes[1].checked) {
                list_items[i].classList.add("task-warning")
            } else {
                list_items[i].classList.remove("task-warning")
            }
        }
    });