It’s Sunday afternoon and it is probably the hottest day Ottawa has been hit with so far. So I went out to The Bay, bought an air conditioner, sat on my computer and hacked away. I decided to make a small jQuery plugin that provides an unobtrusive approach to using images as checkboxes and radio buttons. I had seen a few out there that just take care of the checkboxes and that don’t work at all with labels. I figured that I can whip something up that might help a lot of people out. The script figures out whether it’s a checkbox or a radio button – you just have to provide some styling info.

If the user has Javascript turned off a 100 gig virus will be uploaded to their network, their cars gas tank will fill up with salt and the sky will fall on them… Ok not really, it will just show the regular inputs.

Download It! (v2.0)

Demo It!

Unit Test

Usage

The chunk of javascript below goes in the head of your document.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imagetick.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("input[name='favlang']").imageTick({ // the selector can be a class as well, target your radios or checkboxes
		tick_image_path: "images/radio.gif",  // the image you want to use as a selected state of the radio/checkbox
		no_tick_image_path: "images/no_radio.gif", // image you want to use as a non selected state
		image_tick_class: "radios" // the class you want to apply to all images that are dynamically created
	});
});
</script>

HTML

Here’s some HTML that goes with the example

<h2>Radio Buttons</h2>
<h4>Pick a language</h4>
<ul>
	<li>
		<input type="radio" value="php" id="php" name="favlang" />
		<label for="php">PHP</label>
	</li>
	<li>
		<input type="radio" id="javascript" value="javascript" name="favlang" checked="checked" />
		<label for="javascript">Javascript</label>
	</li>
	<li>
		<input type="radio" id="html" value="html" name="favlang" />
		<label for="html">HTML</label>
	</li>
	<li>
		<input type="radio" id="sql" value="sql" name="favlang" />
		<label for="sql">SQL</label>
	</li>
	<li>
		<input type="radio" id="japanese" value="japanese" name="favlang" />
		<label for="japanese">Japanese</label>
	</li>
</ul>