Cuando trabajamos desarrollando interfaces web, al igual que ocurre con cualquier otro diseño de interfaz, una de las labores básica es aumentar la usabilidad. Hay que hacer fácil y natural el funcionamiento.

Si tenemos un formulario, con una lista con botones de tipo radio o checkbox y al lado una serie de etiquetas label como aparece en la imagen:

• Es incómodo tener que presionar el control…
• … pudiendo presionar cualquier parte de la etiqueta para que se active el control

Hacer esto a mano, elemento a elemento, además de tedioso no es nada práctico, pero jQuery nos proporciona un método para hacerlo de una sola vez:

var labelID;

$('label').click(function() {
       labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});

Recordad tener bien indicados el atributo for de cada label:

<label for="miboton"&mt;Mi botón</label&mt;
<input id="miboton"&mt;...