复选单击事件为类名触发两次vs为id(jquery)触发一次

时间:2018-04-27 07:42:51

标签: jquery html wordpress checkbox

我在wordpress的snippets插件中运行了以下代码。

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的区别

7 个答案:

答案 0 :(得分:1)

问题: - 由于div和复选框都共享相同的类,这就是为什么事件触发两次(单击复选框上的复选框触发事件以及因同一类而在div上)

所以改变课程你会很高兴

工作代码段: -

&#13;
&#13;
jQuery( document ).ready(function(event) {

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

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

    else
      alert('unchecked ');


  });

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你的div类和checkbox类是一样的。更改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>

答案 2 :(得分:0)

这是因为你有两个DOM元素:checkbox。因此,单击时您的div将运行该函数,并且您的输入将在单击时运行该函数(我假设您单击了导致函数运行两次的输入)。您需要更好地分离HTML,建议:

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

答案 3 :(得分:0)

这是因为divinput都有checkbox类。因此,在定位此类时,它实际上是针对这两个元素运行的。

div总是返回未选中状态,复选框将分别返回选中或取消选中。

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

答案 4 :(得分:0)

试试此代码

    <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>

答案 5 :(得分:0)

我是因为你有两个带有checkbox类的元素。更改div周围checkbox内的课程,并且该工作正常。

&#13;
&#13;
$(document).ready(function(event) {

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

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

  });

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 6 :(得分:0)

请您更改类名,在下面的代码中有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>