Как сделать чтобы цвета менялись попеременно при нажатии на элементы?

Question

[Ratibor]

Как сделать чтобы цвета менялись попеременно при нажатии на элементы? если один красный то другой синий и наоборот. Вот код https://jsfiddle.net/Ratibor/yp1tx1u1/1/

Answer 1

[Anton fon Faust]

Например, использовать radio вместо checkbox:
https://jsfiddle.net/6rkv3k0p/1/

Comments

[Ratibor]

Точно!

Answer 2

[Алексей Карагодников]

Можно использовать radio, объединенные в группу, вместо checkbox: https://jsfiddle.net/yp1tx1u1/3/

<input class="i1" type="radio" id="toggle" name="toggle">
<label for="toggle" class="to-be-changed">Нажми меня!
  <p >Здесь будет красный цвет. Или уже есть...</p>
</label >
<input class="i2" type="radio" id="toggle2" name="toggle">
<label for="toggle2" class="to-be-changed2">Нажми меня!
  <p >Здесь будет красный цвет. Или уже есть...</p>
</label >

input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

label {
    display: block;
    background: #08C;
    padding: 5px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: white;
    font-weight: bold;
}
  
.i1:checked ~ .to-be-changed,
.i2:checked ~ .to-be-changed2{
    background: red;
}

Answer 3

[Stalker_RED]

Используйте radio вместо checkbox, и не забудьте указать им name.
https://jsfiddle.net/yp1tx1u1/2/