<input type="checkbox"/> Tristate checkbox
function tristateHandler(e) {
  const states = ['true', 'null', 'false']
  
  const i = states.indexOf(e.target.value) + 1
  e.target.value = i < states.length ? states[i] : states[0]
  switch(e.target.value) {
    case states[0]:
      e.target.checked = true
      break
    case states[1]:
      e.target.indeterminate = true
      break
    default:
      e.target.checked = false
  }
  
  // Sadly, e.target.value is coerced to string
  console.log(typeof e.target.value)
}

document.querySelector('input[type=checkbox]').onclick = tristateHandler

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.