为什么不toggleClass()使用标签元素？我该如何解决？
如果仅单击标签（而不是复选框），您将看到颜色没有变化。
$(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>您只需要change事件绑定而不是click
$('.filter-set label').change(function() {
$(this).toggleClass("active");
});
工作示例：http : //jsfiddle.net/DinoMyte/8gz0jsnq/5/
解释 ：
事实证明，当您click在标签上时，它还会click在input:checkbox（由于嵌套元素包装）上调用事件。因此，标签上的第一个事件确实可以'active'正确设置类，但是随后的click事件将其checkbox切换回empty（基本上删除了类active'）。
上面提到的效果可以在这里看到：http : //jsfiddle.net/DinoMyte/8gz0jsnq/6/
绑定change事件只会触发一次事件（仅用于checkbox），这将正确切换类。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句