jQuery中类名绑定的Checkbox点击事件触发两次，ID绑定仅触发一次

嘿，这个问题我太熟了！你遇到的两次弹窗，本质是事件冒泡+重复的类名选择器搞的鬼。咱们先拆解下原因：

看你的HTML结构，<div>和里面的<input>都用了同一个类名.checkbox。当你点击复选框的时候，浏览器的事件会从点击的<input>元素向上冒泡到它的父元素（也就是那个带.checkbox类的div）。而你写的jQuery代码是给所有带.checkbox类的元素都绑定了click事件，所以这两个元素的事件都被触发了，自然弹出两次提示。

下面给你三个可行的解决方案，按推荐程度排序：

1. 精准绑定到input元素（最推荐） #

直接把选择器改成只选中input类型的复选框，这样就不会误绑到外层的div了：

<script>
jQuery(document).ready(function() {
  // 只选择class为checkbox的input元素
  jQuery("input.checkbox").click(function() {
    if(jQuery(this).is(":checked")) {
      alert('checked');
    } else {
      alert('unchecked');
    }
  });
});
</script>

2. 阻止事件冒泡 #

如果不想改选择器，就在事件处理函数里阻止事件向上冒泡，这样父元素的事件就不会被触发了：

<script>
jQuery(document).ready(function() {
  jQuery(".checkbox").click(function(e) {
    // 阻止事件冒泡到父级元素
    e.stopPropagation();
    if(jQuery(this).is(":checked")) {
      alert('checked');
    } else {
      alert('unchecked');
    }
  });
});
</script>

⚠️ 注意：如果你的外层.checkboxdiv还有其他需要触发的事件，这个方法可能会影响那些事件的正常执行，所以优先选方法1。

3. 调整类名（从根源避免冲突） #

直接给外层的div换个不同的类名，比如.checkbox-wrapper，彻底避免类名重复：
修改后的HTML：

<div class="checkbox-wrapper">
  <h2>
    <label>
      <input type="checkbox" class="checkbox" value=""> Ignore Registration
    </label>
  </h2>
</div>

这样原来的JS代码不用改也能正常工作，因为现在只有input元素带.checkbox类了。

内容的提问来源于stack exchange，提问作者Prakash Ash