¿Cómo puedo hacer un botón de radio HTML con un gran área de destino?

Algo como esto:

enter image description here

Donde el usuario haría clic en cualquier área del botón y seleccionaría ese botón de radio.

¿Alguna sugerencia?

Por lo que puedo decir, los botones de radio se cierran automáticamente y no pueden envolver a otros elementos.

La mejor manera es simplemente envolver la en su , ya que al hacer clic en una etiqueta también tiene el efecto de enfocar su entrada asociada:

  

No se requiere Javascript: demostración: http://jsfiddle.net/GTGan/

Si necesita darle un estilo al texto de la etiqueta por separado, simplemente envuélvalo en un .

¿Has probado usar la etiqueta LABEL? Por motivos de accesibilidad, deberíamos usar tags de tags para asociar tags para formar controles todo el tiempo. Esto no solo ayuda a unir las cosas para los lectores de pantalla, sino que también hace que la etiqueta y el control puedan hacer clic.

Puedes leer un poco más de detalle y encontrar un ejemplo aquí: http://webaim.org/techniques/forms/screen_reader#labels

use Bootstrap, para crear botones alrededor de los botones de radio:

  

Puede usar javascript para lograr este efecto dándole un evento onClick, o simplemente puede usar jQuery en combinación con algunos plugins. Preferiría esta solución para la compatibilidad entre navegadores.