Example using setChecked

by Mike Collins

HTML

<input id="cb10" type="checkbox" value="10"> Ten
<br>
<hr>
<button id="check">Check</button>
<button id="uncheck">Uncheck</button>
<hr>
<div id="output"></div>

JavaScript

var el = document.getElementById('cb10');
var ck = document.getElementById('check');
var uck = document.getElementById('uncheck');
var out = document.getElementById('output');

function changeHandler(event) {
  if (event.target.checked) {
    out.textContent = 'Ten is checked.';
  } else {
    out.textContent = 'Ten is not checked.';
  }
}

function clickHandler(checked) {
  return function(event) {
    out.textContent = '';
    setChecked(el, checked);
  }
}

function setChecked(el, state) {
  el.checked = !state;
  el.dispatchEvent(new MouseEvent('click'));
}

el.addEventListener('change', changeHandler);
ck.addEventListener('click', clickHandler(true));
uck.addEventListener('click', clickHandler(false));