There is HTMLButtonElement.indeterminate
, but you cannot set it normally on click.
This one is quite simple. You need two things.
- JavaScript onclick handler
- Place to hold the state
A simple implementation for this, is to store on Element.target.value
, however, it can only be strings (otherwise, it will be coerced to string).
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
Top comments (0)