How to call a JavaScript function when a checkbox is checked and unchecked?

August 9, 2022

To call a JavaScript function when a checkbox is checked and unchecked, add a change listener with addEventListener.

So if this is your checkbox:

<input type="checkbox" id="my-checkbox">

Then you can, for example, show a popup when the checkbox changes state with this JavaScript:

document.getElementById("my-checkbox").addEventListener("change", event => {
  alert(event.target.checked ? 'Checked' : 'Unchecked');
});