Показать сообщение отдельно
  #6 (permalink)  
Старый 31.12.2020, 18:00
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,709

Я тут подумал, что если это должно быть в форме и отправляться на сервер, то такой чекбокс - не самое лучшее решение.
Проще сделать с обычными кнопками

<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>
Ответить с цитированием