Javascript toggleClass（）在单击标签时未按预期工作

好的，我正在为自定义复选框开发一个解决方案，我将复选框嵌套在标签中并隐藏它，向标签添加一些css伪元素以显示自定义复选框

现在我想在点击标签时添加类

。选中
，以便应用相关样式，但由于某些原因，我似乎无法使切换类正常工作，它只是没有添加类（addClass和removeClass），但这有点“脏”的解决方案

JS

HTML

显示新闻帖子

拨弄

无需绑定
单击
标签上的
，只需更改
复选框即可


$（'input[name=“show news”]”）。在（'change'，function（）上{
$（this）.closest（'label'）.toggleClass（'checked'）；
});
。已选中{
颜色：红色；
}

显示新闻帖子
你所做的是对的，好的。看看这个，你想要这样的东西吗？您可能需要考虑将事件绑定到<代码>更改<代码>事件> <代码> <代码> > <代码> <代码>：


$（函数（）{
$（'.label checkbox input'）。在（'change'，function（）上{
$（this）.closest（“.label checkbox”）.toggleClass（'checked'）；
});
});
。选中{font-weight:bold；}

显示新闻帖子
单击标签时，您还可以单击复选框；因此，您可以单击两次，然后将类切换转到选中状态，然后立即将其删除。
您可以在JSFIDLE上创建演示吗。net@Tushar请看《在PraveenKumar工作》这一次可能会很幸运我明白了，谢谢你。一旦我被允许，我将接受答复。为了获得更通用的解决方案，人们还可以做一些类似于$（'.label checkbox input[type=“checkbox”]'）添加CSS类的事情，以便可以更直观地查看演示
$('.label-checkbox ').on('click', function() {
  $(this).toggleClass('checked');
});

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