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

Question

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 area is selected

You might want to check [Help with a pure CSS Checkbox Image replacement?](http://stackoverflow.com/q/3772273/148271). — IsmailS, Aug 11 '11 at 10:46

score 3 · Answer 1 · answered Feb 04 '11 at 03:00

3

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

answered Feb 04 '11 at 03:00

Jeff

4,136
23
32

You might want to check [Help with a pure CSS Checkbox Image replacement?](http://stackoverflow.com/q/3772273/148271). – IsmailS Aug 11 '11 at 10:46

score 2 · Answer 2 · edited Feb 04 '11 at 03:40

2

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
    }
  }
});

edited Feb 04 '11 at 03:40

Vivek

10,978
14
48
66

answered Feb 04 '11 at 03:38

Adi

81
1

This is amazing! Exactly what I was looking for. Thanks!! How would I go about adding multiple icons instead of one static unchecked.png, say I want like 16 different icons and have them all change to the check.png after clicking? – Parker Feb 04 '11 at 05:53

score 0 · Answer 3 · answered Feb 03 '14 at 16:25

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>

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

3 Answers3