Почему функция onchange не вызывается, когда флажок изменен с использованием свойства selected

Question

Флажок обрабатывается с помощью другой кнопки.

1. Если я непосредственно нажимаю на флажок, срабатывает onchange.

2. Но когда я меняюустановите флажок, используя кнопку onchange (т.е. метод show ()) не вызывается.

var checkbox=document.getElementById("x");
var button=document.getElementById("y");

button.addEventListener("click",function(){
checkbox.checked== true
?checkbox.checked=false
:checkbox.checked=true;

})


var show=function(){
window.alert("onchange called");
}

<input type='checkbox' name='xyz' id='x' onchange="show()">

<br>

<button id='y'>Toggle Checkbox</button>

Как вызвать метод show(), если нажата кнопка.

Answer 1

Установка свойства checked для флажка не вызывает событие change из этого флажка.Вам придется отправить его самостоятельно:

y.addEventListener('click', (e) => {
  // toggle the checkbox
  x.checked = !x.checked;
  // and manually dispatch a change event on the checkbox
  let change = new Event('change');
  x.dispatchEvent(change);
})

x.addEventListener('change', (e) => {
  console.log(x.checked);
})

<input type='checkbox' name='xyz' id='x' />

<br>

<button id='y'>Toggle Checkbox</button>