javascript - toggleClass() 在点击标签时未按预期工作

Question

好吧，我正在研究自定义复选框的解决方案，我将复选框嵌套在标签内并将其隐藏，向标签伪元素添加一些 css 以显示自定义复选框。

现在我想在其点击时将类 .checked 添加到标签，以便应用相关样式，但由于某种原因我似乎无法让切换类工作，它根本就没有添加类(addClass 和 removeClass)工作，但这是一个有点“肮脏”的解决方案。

JS

$('.label-checkbox ').on('click', function() {
  $(this).toggleClass('checked');
});

HTML

<label class="label-checkbox" for="show-news">show news posts
  <input type="checkbox" name="show-news" id="show-news">
</label>

fiddle

https://jsfiddle.net/hhsxyknf/

Answer 1

无需在label上绑定(bind)click，你可以调用checkbox的变化。

$('input[name="show-news"]').on('change', function() {
  $(this).closest('label').toggleClass('checked');
});

.checked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="label-checkbox" for="show-news">show news posts
  <input type="checkbox" name="show-news" id="show-news">
</label>