Я тут подумал, что если это должно быть в форме и отправляться на сервер, то такой чекбокс - не самое лучшее решение.
Проще сделать с обычными кнопками
<style>
.tristate {
border: 1px solid black;
background-color: inherit;
padding: 5px 1em;
margin: 0.5em 1em;
}
.tristate::before {
content: attr(name);
margin-right: 2em;
}
.tristate[value="0"]::after {
content: "не важно";
}
.tristate[value="1"]::after {
content: "есть";
}
.tristate[value="2"]::after {
content: "нет";
}
</style>
<button type="button" class="tristate" value="0" name="COOH"></button><br>
<button type="button" class="tristate" value="0" name="HN3"></button><br>
<button type="button" class="tristate" value="0" name="CH3"></button><br>
<script>
// state 0- не важно, 1 - есть, 2 - нет
const setState = (e, state) => {
e.value=state+'';
}
const getState = (e) => {
return +e.value
}
document.querySelectorAll('.tristate')
.forEach(e => {
e.addEventListener('click', (ev) => {
let st = getState(e)
setState(e, st==2? 0 : ++st)
})
})
</script>