为什么使用选中的属性更改复选框时未调用onchange函数

Question

Checkbox is handled using another button.

1. If I directly click on checkbox then the onchange triggers.

2. But when I change the check box using button, onchange(ie show() method) is not called.

 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> 

How to call show() method if button is clicked.

Answer 1

Setting the checked property of a checkbox doesn't trigger a change event from that checkbox. You will have to dispatch it yourself:

 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>