Переключать лучше по кругу.
не важно - есть - нет - не важно.
Визуально можно использовать checkbox с тремя состояниями.
<style>
input[type=checkbox]+span {
margin-left:10px;
}
input[type=checkbox][data-state="0"]+span::after {
content: "не важно";
}
input[type=checkbox][data-state="1"]+span::after {
content: "есть";
}
input[type=checkbox][data-state="2"]+span::after {
content: "нет";
}
</style>
<label>COOH <input id=ch1 name=ch1 type=checkbox data-state=0><span></span></label><br>
<label>HN3 <input id=ch2 name=ch2 type=checkbox data-state=0><span></span></label><br>
<label>CH3 <input id=ch3 name=ch3 type=checkbox data-state=0><span></span></label><br>
<script>
// state 0- не важно, 1 - есть, 2 - нет
const setState = (e, state) => {
if (state == 2) {
e.indeterminate = true;
} else {
e.indeterminate = false;
e.checked = state;
}
e.dataset.state = state
}
const getState = (e) => {
return +e.dataset.state
}
document.querySelectorAll('input[type=checkbox]')
.forEach(e => {
setState (e, +e.dataset.state);
e.addEventListener('click', (ev) => {
let st = +e.dataset.state
setState (e, st==2? 0 : st+1)
})
})
</script>