Как я могу сделать HTML-радиообъект с большой целевой областью?

Что-то вроде этого:

Если пользователь нажимает на любую область кнопки, и он будет выбирать этот переключатель.

Любые предложения?

Насколько я могу судить, переключатели как самозакрывающиеся и не могут обертывать другие элементы.

Ответ 1

Лучший способ - просто обернуть <input> в его <label>, так как нажатие на метку также влияет на фокусировку связанного с ней ввода:

<label>
    <input name="transfer" type="radio">Bank Deposit
</label>

Нет необходимости в javascript: Демо: http://jsfiddle.net/GTGan/

Если вам нужно стирать текст ярлыка отдельно, просто оберните его в <span>.

Ответ 2

Вы пытались использовать тег LABEL? Для обеспечения доступности мы должны использовать метки меток, чтобы ассоциировать метки для формирования элементов управления все время. Это не только помогает связать вещи для чтения с экрана, но также делает ярлык, а также управляемым кликом.

Вы можете прочитать более подробную информацию и найти здесь пример: http://webaim.org/techniques/forms/screen_reader#labels

Ответ 3

используйте Bootstrap, чтобы создать кнопки вокруг радиоблоков:

<label class="btn btn-lg btn-default">  
<input type="radio"> Something 
</label>

Ответ 4

Вы можете использовать javascript для достижения этого эффекта, предоставив ему событие onClick, или вы можете просто использовать jQuery в сочетании с некоторыми gui-plugins. Я бы предпочел это решение для совместимости с несколькими браузерами.