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
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>
