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

Переключать лучше по кругу.
не важно - есть - нет - не важно.

Визуально можно использовать 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>

Последний раз редактировалось voraa, 31.12.2020 в 10:43.
Ответить с цитированием