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

您需要在li上找到closest $(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>

Answer 2

您需要$(this).addClass("task-warning");来获得特定的复选框。

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

这是预期的，因为您正在使用的选择器.ui-sortable li选择列表中的所有li项目。您需要重构代码的工作方式。我建议遍历该列表，并在未选中该类时将其删除。像这样：

（PS。我不太了解Jquery，所以我用普通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")
            }
        }
    });

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

3 个答案: