checked property

Just setting the checked property does not trigger an event.

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 = '';
    el.checked = checked;
  }
}

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