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();
});

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

JQuery is:checked returning two values every click

checkbox

jquery