JQuery is:checked 每次点击返回两个值

Question

我有一段简单的代码可以在选中复选框时显示信息 div，如果未选中则隐藏该 div。在构建时，我遇到了一个我找不到任何信息可以解决的问题。为了简化问题，我有一个 if 语句，如果输入被检查，它将记录“检查”。如果未选中，则会记录“未选中”。

$("#my-id") 是一个 div，其中包含一个带有复选框输入的标签

<div id='my-id'>
  <span>
    <label>
      <input type="checkbox">
      test
    </label>
  </span>
</div>

所以点击它会选择和取消选择复选框输入。

$("#my-id").unbind('click').click(function(){
    if($(this).find('input').is(':checked')){
        console.log('checked');
    }
    else {
      console.log('not checked');
    }
});

我一键在日志中看到的是：

not checked
checked

然后当我再次点击同一个时，会显示

checked
not checked

这弄乱了 slideUp() 和 slideDown() 函数，因为它们最终被调用了两次，并且我的页面的某些部分上下滑动。任何见解将不胜感激。我确定 JQuery 有一些东西，或者是我还不了解的功能。

Answer 1

这似乎仅在您单击<label> 标记时才会发生。当您单击<div>、<span> 或<input> 时，它可以正常工作。

此行为可能在此处解释：Why the onclick element will trigger twice for label element。

一种解决方法是将return false; 添加到您的点击处理程序中：

$("#my-id").unbind('click').click(function(){
    if($(this).find('input').is(':checked')){
        console.log('checked');
    }
    else {
      console.log('not checked');
    }
    return false; // Prevents event handler from being called twice
});

你也可以在事件对象上调用.preventDefault()，防止它被调用两次：

$("#my-id").unbind('click').click(function(e){
    if($(this).find('input').is(':checked')){
        console.log('checked');
    }
    else {
      console.log('not checked');
    }
    e.preventDefault();
});