Замена флажка с изображением и обновление по клику (возможно, jQuery?)

Question

Есть ли способ, которым я могу заменить изображение флажком, и когда кто-то нажимает на него, он выбирает его и заменяет изображение другим изображением, таким как "проверенное" изображение?

По существу:

[сердечный значок] Здоровье и фитнес

пользователь нажимает на него

[check-icon] Здоровье и фитнес

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

Answer 1

Определенно есть скрипты / плагины для этого.Я не использовал ни одного из них, поэтому я не могу рекомендовать его специально, но вот пример:

http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin

Answer 2

Я бы попробовал этот плагин: SimpleImageCheck http://www.jkdesign.org/imagecheck/

Код для настройки флажка выглядит просто:

$('#checkbox').simpleImageCheck({
  image: 'unchecked.png',
  imageChecked: 'check.png'
  afterCheck: function(isChecked) {
    if (isChecked) {
      // do something
    }
  }
});

Answer 3

Нет необходимости плагинов, ни JQuery:

<span onclick="changeCheck(this)">
<img src="http://www.clker.com/cliparts/e/q/p/N/s/G/checkbox-unchecked-md.png">
<img src="http://www.clker.com/cliparts/4/h/F/B/m/4/nxt-checkbox-checked-ok-md.png">
<input type="checkbox" name="chk">
</span>
<script>
function changeCheck(target)
{
    chk = target.lastElementChild;
    chk.checked = !chk.checked;
    target.children[+ chk.checked].style.display = '';
    target.children[1 - (+ chk.checked)].style.display = 'none';
}
function initCheck()
{
    chk = document.getElementsByName('chk')[0];
    chk.style.display = 'none';
    chk.parentNode.children[1 - (+ chk.checked)].style.display = 'none';
}
initCheck();
</script>