Ordinary checkboxes on the web are a bit boring. I’ve seen a few replacement scripts, but I thought that it would be pretty easy to write my own.
function replaceCheckbox(name, on, off) { $(name+':not(.checkbox-replaced)').each(function (){ var image = ($(this).is(':checked') ? on : off); var imageElement = $('<img style="cursor:pointer;" src="'+image +'" onclick="$(this).next().click();"/>'); $(this).before(imageElement).hide() .addClass('checkbox-replaced'); imageElement.click(function (){ $(this).attr('src',(this.src.indexOf(off) > 0 ? on : off)); }); }); }
It seems to do the job fairly nicely, so I’m quite happy. It does require the use of jQuery. To use it simply go:
replaceCheckbox('input[type=checkbox]:visible','check_on.png','check_off.png');
Tags: javascript, jQuery, Work