<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
input[type=checkbox]+span {
margin-left:10px;
}
input[type=checkbox]:indeterminate+span::after {
content: "нет";
}
input[type=checkbox]:checked+span::after {
content: "есть";
}
input[type=checkbox]+span::after {
content: "не важно";
}
</style>
</head>
<body>
<label>COOH <input id=ch1 name=ch1 type=checkbox ><span></span></label><br>
<label>HN3 <input id=ch1 name=ch1 type=checkbox ><span></span></label><br>
<label>CH3 <input id=ch1 name=ch1 type=checkbox ><span></span></label><br>
<script>
document.querySelectorAll('input[type=checkbox]')
.forEach(e => {
let t;
e.addEventListener('click', (ev) => {
if(!t && !e.checked) {
e.checked = false;
t = e.indeterminate = true;
}
else if(t){
e.checked = false;
t = false;
}
console.log(`st = ${e.indeterminate ? 2 : +e.checked}`);
});
})
</script>
</body>
</html>