Aug
Labelize: a jQuery plugin for making big honking labels
Labelize is a handy jQuery plugin that lets you give input-containing elements <label/> like properties, so that clicking on the container activates the input inside. The goal? To improve usability by giving hard-to-click input elements like radio buttons and checkboxes generous target areas. Surprisingly, this can’t be done with a <label/> element alone—if you want it supported in IE6, that is.
Say we have the following markup:
<div class="myLabel">
<input type="checkbox"/>
</div>To make the “myLabel” div become a label-like container for the checkbox its holding, we simply do the following:
<script>
$('.myLabel').labelize()
</script>That’s it! Now if we click anywhere on “myLabel”, the checkbox is clicked—and its onclick() event is fired too. Huzzah.
If you’d like to see the plugin in action, I’ve whipped up a quick project page with some working examples. Please have a look and let me know what you think.
