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

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

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

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

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

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

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

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

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

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

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

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

<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>

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