1

Нужно отследить изменение состояния чекбокса, в случае, если это состояние было изменено с помощью JS. Неожиданно для себя открыл, что при таком условии, событие change не эмитится

const checkbox = document.getElementById('box');
const btn = document.getElementById('btn');
btn.addEventListener('click', ()=>{
  checkbox.checked = !checkbox.checked;
})
checkbox.addEventListener('change', ()=>{
  console.log("Состояние чекбокса изменнено")
})
 <input id='box' type="checkbox">
<button id="btn">Click</button>

2
  • 1
    как вариант, при изминении значения чекбокса, вызывать его событие change таким образом : checkbox.dispatchEvent(new Event("change"));, ну или как в ответе Оптимуса, клик тоже должен сработать) 2 мая 2019 в 8:45
  • капец, тысяча просмотров - ни одного лайка за вопрос)
    – Dmytro
    8 июн 2021 в 15:30

2 ответа 2

4

Можно переопределить сеттер для свойства checked при помощи Object.defineProperty.

Object.defineProperty(checkbox, 'checked', {
    set: a => a != checkbox.checked && checkbox.click()
});

Вообще в общем случае получить доступ к прототипу html элемента нельзя, но тут получилось схитрить и дернуть click по условию, и вот результат

const checkbox = document.getElementById('box');
checkbox.addEventListener('change', () => {
  console.log("Состояние чекбокса изменнено")
})

document.querySelectorAll('input[type="checkbox"]')
  .forEach(cb => Object.defineProperty(cb, 'checked', {
      set: a => a != cb.checked && cb.click()
  }));
<input id='box' type="checkbox">
<button id="btn" onclick="checkbox.checked = checkbox.checked">No change</button>
<button id="btn" onclick="checkbox.checked = !checkbox.checked">change</button>

1
  • это равнозначно if (a != checkbox.checked) checkbox.click() при этом a это аргумент переданный в сеттер, т.е. то что вы присваиваете вот тут checkbox.checked = !checkbox.checked 2 мая 2019 в 9:23
-1

const checkbox = document.getElementById('box');
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  checkbox.checked = !checkbox.checked;
  check(checkbox);
})

function check(el) {
  if (el.checked) {
    console.log("Флажок установлен");
  } else {
    console.log("Флажок не установлен");
  }
}
<input id='box' type="checkbox">
<button id="btn">Click</button>

5
  • Не, это не то. Потому что "отслеживание" идет в самом методе, который и изменяет состояние чекбокса. Минусы не мои
    – Dmytro
    2 мая 2019 в 8:29
  • @Дмытрык через change вы точно не проверите. Это событие вызывается при потери фокуса checkbox, а у вас фокус вызывается по #btn 2 мая 2019 в 8:32
  • При потери фокуса вызывается blur. А при изменении состояния change. Вот только оказалось, что оно не срабатывет, если состояние изменить через JS
    – Dmytro
    2 мая 2019 в 8:33
  • @Дмытрык ну так состояние изменения проверяется только тогда когда с элемента убран фокус, если вы измените форму и будете находиться в ней то change не вызовется 2 мая 2019 в 8:37
  • Автор хочет следить за изменениями, это предполагает что управляющий код, который меняет значение чекбоксов он менять не может 2 мая 2019 в 9:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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