Три состояния одного блока при клике

[yaparoff]

При клике на блок, он должен загораться желтым цветом. Если кликнуть еще раз, он должен загореться красным. Если кликнуть еще раз - он вернется в исходное состояние, белый цвет.

Т.е. три цвета чередуются друг за другом:
белый -> желтый -> красный

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

Сделал так: к <label> привязал чекбокс и когда состояние чекбокса меняется, меняется и цвет <label> (ну как обычно стилизуют чекбокс).
Т.е. сейчас два состояния: белый цвет и желтый.

Думаю как сделать чтоб еще красный появлялся:
сверстал еще один скрытый чекбокс и label, и как то их нужно будет показывать в нужный момент

https://codepen.io/anon/pen/ZmBzYL

[j0hnik]

Т.е. без чекбоксов тут не обойтись.

кто вам такое сказал

[yaparoff]

кто вам такое сказал

если эти данные реально передавать на бэкэнд без чекбоксов, то ок.
Но как тогда это сделать?

[laimas]

yaparoff, если последовательно, то не флажок, а группа радио кнопок. Если Ajax, то можно сразу передавать состояние на сервер без кнопок.

[j0hnik]

если эти данные реально передавать на бэкэнд без чекбоксов, то ок

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

[Dilettante_Pro]

без аякса, чекбоксов и радио. Сколько угодно вариантов цвета

<div id="blok" style="width:50px;height:50px;border:1px solid black"></div>
<form>
   <input type="text" id="currentcolor" name="currentcolor" value="white" style = "display:none;">
</form>
<script>
var color = ["white","green","yellow","red"], i = 0;
blok.onclick = function() {
   i = i < (color.length - 1)?i+1:0;
   this.style.backgroundColor = color[i];
   currentcolor.value = color[i];
}
</script>

[yaparoff]

j0hnik, Dilettante_Pro, точно. гениально! большое спасибо!