Question

为什么toggleClass()不能使用label元素？我该如何解决？

如果您只点击标签（而非复选框），您会看到颜色不会改变。

$(document).ready(function() {
  $('.filter-set label').click(function() {
    $(this).toggleClass('active');
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-set">
  <ul>
    <li><label><input name="checkbox" type="checkbox"> label 1</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 2</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 3</label></li>
  </ul>
</div>

Answer 1

您只需要change事件绑定而不是click

$('.filter-set label').change(function() {
    $(this).toggleClass("active");
  });

工作示例：http://jsfiddle.net/DinoMyte/8gz0jsnq/5/

说明：

事实证明，当你在标签上click时，它还会调用click上的input:checkbox事件（因为嵌套元素包装）。因此，标签上的第一个事件确实正确地设置了类'active'，但是checkbox上的后续点击事件将其切换回empty（基本上删除了类'{ {1}}“）。

上面提到的效果可以在这里看到：http://jsfiddle.net/DinoMyte/8gz0jsnq/6/

绑定active事件只会触发一次事件（仅适用于change），这会切换正确的类。

Answer 2

您要在此处执行的操作是使用复选框更改事件：

$("input[type=checkbox]").on('change', function () {
  $(this).parent().toggleClass("active");
});

直接单击复选框并在标签上工作：

https://jsfiddle.net/s6fx1Lez/

有关发生这种情况的详细信息：

https://stackoverflow.com/a/8386513/660694

jQuery toggleClass不适用于label

2 个答案: