jQuery-快速单击后切换标签/输入中断上的类

我的复选框有个奇怪的问题

HTML:

<div class="f-checkbox">
    <label class="f-label" for="f-field">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure cumque 
    voluptatem nisi incidunt praesentium quibusdam sit in alias velit 
    consectetur facere amet voluptates possimus, aliquid nam omnis fugit eum 
    molestias ucimus, saepe laboriosam, enim nobis. Omnis eveniet rem 
    impedit,commodi mollitia assumenda beatae nulla consequuntur autem debitis 
    fugiat voluptatem laudantium!
</label>

<input type="checkbox" id="f-field" name="f-field" value="1" aria-invalid="false">

</div>

jQuery('.f-checkbox label').on('click', function(e){
    jQuery(this).parent('.f-checkbox').toggleClass('active');
    console.log('Test');
})

小提琴链接：

它只是“自定义”复选框（假设普通复选框被隐藏，它只是用于调试过程）。单击“标签/框”时，它会正常工作。绿色为选中状态，红色为未选中状态。问题是当我点击标签（文本），然后快速点击左边的空格。有时它会翻转，“活动”类分配不正确

以下是显示问题的动画：

我试着记录每一次点击，检查是否没有双击，但没有

---

提前感谢。

尝试检测输入元素的更改事件，然后测试元素是否被选中，并基于此添加/删除“活动”类

jQuery('.f-checkbox label').on('click', function(e){
  if (jQuery(this).sibling('input').prop('checked')) {
    jQuery(this).parent('.f-checkbox').addClass('active');
  } else {
    jQuery(this).parent('.f-checkbox').removeClass('active');
  }
  console.log('Test');
})

---

我认为当您单击时，选中状态中存在不匹配

jQuery('.f-label').on('click', function(e){
  jQuery(this).parent(".f-checkbox").toggleClass('active');
  jQuery(".f-field").click();
  console.log('Test');
})

---

尝试使用此选项。

不幸的是，这没有帮助。不过，谢谢你的建议。我仍然设法使它像我的示例中的错误一样-选中复选框的红方块。通过直接单击复选框？不，我项目中的复选框是隐藏的。在我的小提琴上，它只用于“调试”过程。通过单击标签，然后在左侧使用假彩色复选框。效果和我在第一篇文章中的gif一样-谢谢，有时候还是有问题，但至少在再次点击后修复了。如果仍然有问题，我建议你在没有javascript/jquery的情况下做你想做的事情，研究一下“纯css复选框”。简而言之：如果将label元素移动到input元素之后，则可以使用选中的选择器

input:checked

和同级选择器

+

来设置标签样式（或标签的伪元素）。不幸的是，由于程序员使用的框架，我无法移动HTML结构中的任何内容。我认为这个解决方案足够了，谢谢。