Replacing Checkbox with image and update onClick (possibly jQuery?)

Is there a way that I can have an image replace a checkbox, and when someone clicks on it, it selects it, and changes the image to another image like a "checked" image?

So essentially:

[heart-icon] Health and Fitness

user clicks on it

[check-icon] Health and Fitness

and now that are开发者_高级运维a is selected

---

There are definitely scripts/plugins available to do this. I've not used any of them so I can't recommend one specifically, but here's an example:

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

---

I would try this plugin: SimpleImageCheck http://www.jkdesign.org/imagecheck/

Code to customize the checkbox looks simple:

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

---

No need of plugins nor 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>