<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.