событие щелчка флажка, запущенное дважды для имени класса против один раз для идентификатора (jquery)

Question

У меня есть следующий фрагмент кода, работающий в плагине snippets в WordPress.

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>

Когда флажок установлен, я получил два оповещения (отмечено, а затем не отмечено).

Когда флажок снят, я также получил два оповещения (не проверено и не проверено).

Я не уверен, почему это происходит, но когда я изменил тег ввода, чтобы использовать идентификатор вместо класса, решение отлично работает.

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

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

Я просто пытаюсь выяснить, что происходит, или разницу в использовании классов и идентификаторов для события click

Answer 1

I, потому что у вас есть два элемента с классом checkbox. Измените класс в div вокруг вашего checkbox, и он будет работать правильно.

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

Answer 2

Можете ли вы изменить имя класса, в приведенном ниже коде есть 2 класса, использующих одно и то же имя 1. div class: checkbox 2 является входным классом: checkbox, пожалуйста, измените имя класса div, тогда вы получите только 1 предупреждение , Вы также можете добавить ввод в jQuery click функционал

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>

Answer 3

Попробуйте этот код

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

Answer 4

Это потому, что и div, и input имеют класс checkbox. Поэтому при нацеливании на этот класс он фактически работает с обоими элементами.

DIV всегда возвращает непроверенный, и флажок вернет проверенный или непроверенный соответственно.

Измените класс div или измените JS на целевой $(input.checkbox), если вы хотите придерживаться существующих имен классов.

Answer 5

Проблема: - Поскольку div и checkbox оба совместно используют один и тот же класс, поэтому событие инициируется два раза (нажатие на событие триггера checkbox на флажке, а также на div оба из-за того же класса)

Так что поменяй классы и тебе будет хорошо идти

Рабочий фрагмент: -

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>

Answer 6

Это потому, что у вас есть два элемента DOM с классом: checkbox. Таким образом, ваш div при нажатии будет запускать функцию, а ваш ввод будет запускать функцию при нажатии (я предполагаю, что вы щелкаете по входу, что вызывает выполнение функции дважды). Вам нужно лучше отделить HTML, рекомендуется:

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

Answer 7

ваш класс 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>