复选框单击事件为类名触发了两次，而为 id 触发了一次（jquery）答案

【问题标题】：checkbox click event fired twice for class name vs once for id (jquery)复选框单击事件为类名触发了两次，而为 id 触发了一次（jquery）
【发布时间】：2018-04-27 07:42:51
【问题描述】：

我在 wordpress 的 sn-ps 插件中运行了以下代码。

jquery：

<script>
    jQuery(document).ready(function(event)
    {
        jQuery(".checkbox").click(function()
        {
            if(jQuery(this).is(":checked"))
                alert('checked');
            else
                alert('unchecked ');
        });
    });
</script>

HTML：

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

当复选框被选中时，我收到了两个警报（选中，然后是未选中）。

当复选框未选中时，我也收到了两个警报（未选中和未选中）。

我不确定为什么会发生这种情况，但是当我将输入标签更改为使用 id 而不是类时，解决方案完美运行。

jQuery("#checkbox").click ..........

<input type="checkbox" id="checkbox"..........

我只是想找出发生了什么，或者点击事件使用类和 id 的区别

【问题讨论】：

你得到了答案，但有一个提示：在用于与“js-”进行 javascript 交互的类名前加上前缀是一个很好的约定。因此，为输入提供类“js-checkbox”将更清楚地了解该类的用途。
是的，同意，请注意，将坚持某种形式的约定以防止将来发生这种情况，谢谢

标签： jquery html wordpress checkbox

【解决方案1】：

问题：- 由于 div 和 checkbox 都共享同一个类，这就是为什么事件触发两次（点击 checkbox 触发事件在 checkbox 以及 div 都到期同班）

所以改变课程，你会很高兴

工作 sn-p:-

jQuery( document ).ready(function(event) {

  jQuery(".checkbox").click(function() {

    if(jQuery(this).is(":checked"))
      alert('checked');

    else
      alert('unchecked ');


  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore
  Registration</label></h2>
</div>

【讨论】：

【解决方案2】：

您的 div 类和复选框类是相同的。更改 div 类名。

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

否则点击选择器发生变化

<script>
jQuery( document ).ready(function(event) {

    jQuery(".checkbox input[type=checkbox]").click(function() {

        if(jQuery(this).is(":checked"))
            alert('checked');

        else
            alert('unchecked ');

    });

});
</script>

【讨论】：

【解决方案3】：

这是因为你有两个带有类的 DOM 元素：checkbox。因此，单击时您的 div 将运行该函数，单击时您的输入将运行该函数（我假设您单击导致该函数运行两次的输入）。你需要更好地分离你的 HTML，推荐的是：

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

【讨论】：

【解决方案4】：

这是因为div 和input 都有checkbox 的类。所以当定位这个类时，它实际上是针对两个元素运行的。

div总是返回unchecked，checkbox会分别返回checked和unchecked。

更改div 的类，或者如果您想坚持现有的类名，请将您的JS 更改为目标$(input.checkbox)。

【讨论】：

【解决方案5】：

试试这个代码

    <script src="https://code.jquery.com/jquery.js"></script>
        <script type="text/javascript">
    $(function () {
            $("#checkbox").click(function () {
                if ($(this).is(":checked")) {

                    if(jQuery(this).is(":checked"))
                        alert('checked');
  } else {
                   alert('unchecked ');
}
            });
        }); 

        </script>


        <form>

        <div class="checkbox">
          <h2><label><input type="checkbox" class="checkbox" id ="checkbox" value="">Ignore Registration</label></h2>
    </div>
        </form>

【讨论】：

你应该总是添加一个解释，这只会导致开发者的复制和粘贴一代:)

【解决方案6】：

我是因为你有两个元素的类checkbox。在checkbox 周围更改div 中的类，它可以正常工作。

$(document).ready(function(event) {

  $(".checkbox").click(function() {

    if ($(this).is(":checked")) {
      alert('checked');
    } else {
      alert('unchecked ');
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxContainer">
  <h2><label for="checkboxId">Ignore Registration</label>
    <input id="checkboxId" type="checkbox" class="checkbox" value=""></h2>
</div>

【讨论】：

【解决方案7】：

能否请您更改类名，在下面的代码中，有 2 个类使用了相同的名称 1. div 类：复选框 2 是输入类：复选框，请更改 div 类名，然后您只会收到 1 个警报, 你也可以在 jQuery 点击功能中添加输入

jQuery("input.checkbox").click(function(e) {

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

解决方案 1：

<script>
jQuery( document ).ready(function(event) {
    jQuery("input.checkbox").click(function() {
            if(jQuery(this).is(":checked"))
                alert('checked');

            else
                alert('unchecked ');


    });

});
</script>
<div class="checkbox">
<h2><label><input type="checkbox" class="checkbox" value="">Ignore 
Registration</label></h2>
 </div>

解决方案 2：

<script>
jQuery( document ).ready(function(event) {

    jQuery(".checkbox").click(function() {

            if(jQuery(this).is(":checked"))
                alert('checked');

            else
                alert('unchecked ');


    });

});

</script>
<div class="checkbox1">
  <h2><label><input type="checkbox" class="checkbox" value="">Ignore Registration</label></h2>
</div>

【讨论】：