Чекбокс (radio) — как менять картинку в зависимости от выбран/не выбран?

Question

[Антон]

<input type="radio" checked name="dva" id="dva1"/>
<label for="dva1"><img src="/upload/s1p1.png"></label>

Если не выбран s1p1.png, выбран - менять на s1p2.png

Answer 1

[Dima Polos]

<input type="radio" checked name="dva" id="dva1"/>
<label for="dva1"><img src="/upload/s1p1.png" class="notChecked"><img src="/upload/s1p2.png" class="ifChecked"></label>
<style>

input:checked + label img.ifChecked{
  display: block;
}

input:checked + label img.notChecked{
  display: none;
}

input + label img.ifChecked{
  display: none;
}

input + label img.notChecked{
  display: block;
}


</style>

https://jsfiddle.net/z8b5cune/

Comments

[Dima Polos]

Вообще на js проще) Но вот на CSS.
input:checked + label img.ifChecked - берем инпут отмеченый, через плюс дотягиваемся до лейбла и ищем в нем картику с классом, задаем ей дисплей блок, аналогичным селектором дотягиваемся до первой картинки и ей даем дисплей нон.
input + label img.ifChecked - все тоже самое, но наоборот, инпут не отмеченный, то одну картинку меняем дисплей с нон на блок, а у второй блок на нан. Если вместо дисплей нон и так далее задать какие-то другие свойства, типа опасити и позишена, то вообще с анимацией можно сделать, добавив транзишен.

[Александр]

Dima Polos, шутишь? Зачем js? Даже img не нужен.