javascript - 为什么toggleClass在这里不起作用？

我正在尝试单击此处添加/删除类，但是toggleClass却无法正常运行。相反，addClass可以正常工作，但是我需要它才能在第二次单击时删除该类。

$('.label1').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');
    $(this).toggleClass('checked');
    $checkItem.prop("checked", !$checkItem.prop("checked"));
})

$('.label2').on('click', function() {
    var $checkItem = $(this).find('input[type=checkbox]');
    $(this).addClass('checked');
    $checkItem.prop("checked", !$checkItem.prop("checked"));
})

你能告诉我我在做什么错吗？

在此处查看实际操作：Test jquery。



谢谢！

最佳答案

您可以通过挂接到复选框的change事件来避免该问题并简化逻辑。然后，您可以根据checked属性的状态在父label上设置checked类。

在复选框上使用change而不是click来满足可访问性标准也要好得多，因为它允许使用键盘进行导航的用户在UI中触发相同的效果。尝试这个：

$(':checkbox').on('change', function() {
  $(this).closest('label').toggleClass('checked', this.checked)
});

.checked {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="checkbox">
    <label class="label1">
      <input type="checkbox">
      Check me out
    </label>
  </div>
  <div class="checkbox">
    <label class="label2">
      <input type="checkbox">
      Check me out
    </label>
  </div>
</form>