Question

我的复选框出现了奇怪的问题。

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>

JS：

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

小提琴链接：https://jsfiddle.net/orddstgo/2/

它只是＆＃34; custom＆＃34;复选框（假装隐藏了普通复选框，它只是用于调试过程）。当我单击标签/框时，它可以正常工作。检查绿色，未选中红色。问题是当我单击标签（文本）然后左边的空间足够快。有时它翻转并且活跃＆＃34; class未正确分配。

此处显示问题的动画：https://gfycat.com/BraveExcitableAdamsstaghornedbeetle

我已尝试记录每次点击，以检查是否没有双击注册但没有。

提前致谢。

Answer 1

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

find / -type f | /home/user/findlongest

Answer 2

我认为点击

时检查状态不匹配

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

尝试使用它。

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

2 个答案: