change event

Using the change event to track when a checkbox state changes.

by Mike Collins

HTML

<input id="cb10" type="checkbox" value="10"> Ten<br>
<hr>
<div id="output"></div>

JavaScript

var el = document.getElementById('cb10');
var out = document.getElementById('output');

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

el.addEventListener('change', changeHandler);