javascript - 选中每个 <li> 的复选框时更改 <li> 的类

Question

我正在研究 li，它包含每个列表项组的复选框。当我单击每个列表中的复选框时，它应该为列表添加类，但它为我的所有列表添加类，即使我只选中了一个复选框。 这是我的代码。我希望 addclass 只应用于自身 li 而不是将所有 addclass 应用于所有 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>

这是我的 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

您需要找到 closest li 元素到 $(this) 以将类应用于:

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