Hay varias maneras de hacer esto. Tener un contenedor alrededor de los botones de radio es muy recomendable independientemente, pero también puedes poner una clase directamente en los botones. Con este código HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
puede seleccionar por clase:
$(".shapeButton").click(SetShape);
o seleccionar por ID de contenedor:
$("#shapeList").click(SetShape);
En cualquier caso, el evento se disparará al hacer clic en cualquiera de la radio botón o la etiqueta correspondiente, aunque extrañamente en este último caso (al seleccionar por "#shapeList"), al hacer clic en la etiqueta se activará la función de clic dos veces por algún motivo, al menos en FireFox; seleccionar por clase no hará eso.
SetShape es una función, y se ve así:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
esta manera, usted puede tener etiquetas en sus botones, y puede tener múltiples listas de botón de radio en la misma página que hacer cosas diferentes. Incluso puede hacer que cada botón individual en la misma lista haga cosas diferentes configurando un comportamiento diferente en SetShape() en función del valor del botón.
Nota. Lo mejor es no hacer que los elementos de formulario respondan al clic, ya que muchas personas navegan formularios usando el teclado. – superluminary