как получить (или вызвать) событие изменения, когда ввод [флажок или переключатели] изменен с использованием JavaScript - PullRequest
Новая
       31

как получить (или вызвать) событие изменения, когда ввод [флажок или переключатели] изменен с использованием JavaScript

0 голосов
/ 18 сентября 2018

У меня есть следующие настройки, когда я устанавливаю / снимаю флажок, нажимая на ярлык или сам флажок, срабатывает событие изменения,

, но когда я пытаюсь установить / снять флажок, используя javascript, скажем, нажавКнопка, флажок будет проверять или снимать флажок, но изменение события не запускается.

пожалуйста, проверьте следующий код 

var checkbox=document.getElementById("check");
  
checkbox.addEventListener("change",function(){window.alert("change event")})

document.getElementsByTagName("button")[0].addEventListener("click",function(){
  checkbox.checked ? checkbox.checked=false : checkbox.checked=true;
})
<label><input type=checkbox id=check>this is label</label><br>
<button>toggle checkbox</button>

Почему это?и как получить событие изменения при изменении с помощью JavaScript.

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

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

var checkbox = document.getElementById("check");

checkbox.addEventListener("change", function() {
  yourFunction()
});

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  checkbox.checked ? checkbox.checked = false : checkbox.checked = true;
  yourFunction()
});

function yourFunction() {
  window.alert("change event")
}

Разве это не решает вашу проблему? Я верю, ответ Анкит Агарвал лучше согласуется с вашим первоначальным намерением.

0 голосов
/ 18 сентября 2018

Почему это тройное состояние?Просто используйте checkbox.click(); так просто.Это переключит проверку / снятие флажка вместе с инициированием события change. 

var checkbox = document.getElementById("check");

checkbox.addEventListener("change", function() {
  window.alert("change event")
})

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  checkbox.click();
})
<label><input type=checkbox id=check>this is label</label><br>
<button>toggle checkbox</button>
...