Qualcosa di simile a questo:Come posso creare un radiobutton HTML con una vasta area di destinazione?
in cui l'utente clicca su qualsiasi area del pulsante e sarebbe selezionare il pulsante di opzione.
Qualche suggerimento?
Per quanto posso dire, i pulsanti di opzione si chiudono automaticamente e non possono avvolgere altri elementi.
Il modo migliore è quello di avvolgere solo il <input> nella sua <label>, come fare clic su un marchio ha anche l'effetto di concentrare il suo ingresso associato:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript necessario: Demo: http://jsfiddle.net/GTGan/
Se è necessario personalizzare il testo dell'etichetta separatamente, basta avvolgerlo in un <span>.
È possibile utilizzare javascript per ottenere questo effetto assegnandogli un evento onClick oppure è possibile utilizzare jQuery in combinazione con alcuni gui-plugins. Preferirei questa soluzione per la compatibilità cross-browser.
Hai provato a utilizzare il tag LABEL? Per motivi di accessibilità dovremmo utilizzare i tag etichetta per associare le etichette ai controlli dei moduli tutto il tempo. Ciò non solo aiuta a legare insieme le cose per i lettori di schermo, ma rende anche l'etichetta e il controllo selezionabili.
Si può leggere un po 'più in dettaglio e trovare un esempio qui: http://webaim.org/techniques/forms/screen_reader#labels
Vedo che Wesley Murch mi ha battuto al punch e l'ho perso LOL – ph33nyx
uso Bootstrap, per creare pulsanti in giro radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
La parte migliore di questa soluzione è che è ** accessibile ** – zzzzBov
... e come bonus: non è necessario un 'id' per il tuo input o un 'for' per la tua etichetta, è implicito. –