Labelize

Labelize is a jQuery plugin that lets you give arbitrary container elements <label/>-like properties, and smooth over click/change event compatibility between browsers.

Features

• Works with any input element (radio buttons, text inputs, etc.)
• Preserves click() and change() events between browsers
• Optional: specify onhover class

Demo

http://bentlegen.github.com/labelize/demo

Usage

Simple case

Container div wrapping a checkbox.

<div class="myLabel">
  <input type="checkbox">Enabled
</div>

<script>
  // Clicking anywhere on the "myLabel" div checks/unchecks
  // the contained checkbox
  
  $('.myLabel').labelize();
</script>

With label hover effect

Because IE6 doesn’t support the :hover css command for div elements, Labelize lets you define a hoverClass that is applied on label hover:

<script>
  $('.myLabel').labelize('hoverClass');
</script>

License

MIT License. See LICENSE for more information.