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.