JSFiddle - React, Tailwind, and code Playground

HTML

<input id ='cb' type='checkbox' />

<button id='btn'> toggle</button>

JavaScript

function $(id) {
   return document.getElementById(id);
}

if (Object.prototype.watch)  {
  $('cb').watch("checked", function(){
     console.log('Checked state changed from script', arguments);
     return true;
  });
}


$('btn').onclick = function() {
   $('cb').checked = !$('cb').checked;
};
    
$('cb').onchange = function() {
  console.log('Checked state changed from the UI', arguments);
};    


$('cb').onpropertychange = function() {
    
    if (event.propertyName == 'checked') {
       console.log('Checked state changed onproperty change');    
   }
};