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