0

Событие клика вызывает 2 раза. Событие change вызывается 1 раз, но тольео для первого элемента

function toggleCheckbox() {
  const list = document.querySelectorAll('.form-callback-input-checkbox-label');
  list.forEach((input) => {
    input.addEventListener("click", function() {
      alert(this)
    });
  });
}

toggleCheckbox();

https://codepen.io/Alexxxsander/pen/qBMqeyg

3
  • Я запустил код и у меня по одному разу срабатывает...
    – SwaD
    27 фев в 22:09
  • Даже в codepen 2 раза срабатывает, а у вас 1 раз. хм...
    – Alexsander
    27 фев в 22:11
  • Я там же тыкал. браузер хром. Везде по одному разу
    – SwaD
    27 фев в 22:15

1 ответ 1

0

Вы событие вешаете на весь label, а он триггерит инпут, отсюда 2 срабатывания (label + input). Решение банальное, вешать клик на input:

const list = document.querySelectorAll('.form-callback-input-checkbox-label input');

function toggleCheckbox() {
  const list = document.querySelectorAll('.form-callback-input-checkbox-label input');
  list.forEach((input) => {
    input.addEventListener("click", function() {
      alert(this)
    });
  });
}

toggleCheckbox();
<label for="form-callback-checkbox-input-1" class="form-callback-input-checkbox-label">
  <div class="form-callback-input-checkbox-position">
    <input type="checkbox" name="checkbox-input" class="form-callback-input-checkbox-input" id="form-callback-checkbox-input-1">
  </div>
  <span class="form-callback-input-checkbox-name">Тест-день! Получить скидку -30%?</span>
</label>
<label for="form-callback-checkbox-input-2" class="form-callback-input-checkbox-label">
  <div class="form-callback-input-checkbox-position">
    <input type="checkbox" name="checkbox-input" class="form-callback-input-checkbox-input" id="form-callback-checkbox-input-2">
  </div>
  <span class="form-callback-input-checkbox-name">Тест-день! Получить скидку -30%?</span>
</label>

5
  • А вот кликнуть на лейбл я даже не подумал ))
    – SwaD
    27 фев в 22:32
  • А я промазал) и 2 раза вылезло
    – InDevX
    27 фев в 22:37
  • Ну круто ) Возможно это и есть проблема с решением. Я просто честно жал на чекбоксы
    – SwaD
    27 фев в 22:44
  • Ну решение 50 на 50. Текст лейбла, тоже должен быть как тригер
    – Alexsander
    28 фев в 7:59
  • 1
    @Alexsander лейбл по-дефолту является триггером ипнута... Полностью пример добавил
    – InDevX
    28 фев в 7:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.