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>

小提琴

https://jsfiddle.net/hhsxyknf/

Answer 1

无需在click上绑定label，您只需要更改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>

Answer 2

你做的是对的，AFAIK。看看这个，你想要这样的东西吗？您可能需要考虑将事件与change的{{1}}事件绑定而不是<input>：

＆＃13;

<label>

＆＃13;

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

＆＃13;

.checked {font-weight: bold;}

＆＃13;

Answer 3

单击标签时，也可以单击复选框;因此，你得到两次点击，你的班级切换进入检查，然后立即将其删除。

toggleClass（）在标签点击时无法正常工作

3 个答案: