Tôi làm cách nào để tạo một đài phát thanh HTML với một khu vực mục tiêu lớn?

Question

Something như thế này:

Trong trường hợp người dùng sẽ nhấp vào bất kỳ khu vực của các nút và nó sẽ chọn mà nút radio.

Mọi đề xuất?

Theo như tôi có thể biết, các nút radio là tự đóng và không thể bao quanh các phần tử khác.

Answer 1

Cách tốt nhất là chỉ cần quấn <input> trong <label> của nó, như nhấp chuột vào một nhãn cũng có tác dụng tập trung đầu vào liên quan:

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

Không javascript yêu cầu: Demo: http://jsfiddle.net/GTGan/

Nếu bạn cần phải tạo kiểu cho văn bản nhãn riêng biệt, chỉ cần bọc nó trong một số <span>.

Answer 2

Bạn có thể sử dụng javascript để đạt được hiệu ứng này bằng cách cho nó một sự kiện onClick hoặc bạn chỉ có thể sử dụng jQuery kết hợp với một số plugin gui. Tôi thích giải pháp này cho khả năng tương thích giữa các trình duyệt.

Answer 3

Bạn đã thử sử dụng thẻ LABEL chưa? Vì lợi ích trợ năng, chúng tôi nên sử dụng thẻ nhãn để liên kết nhãn để tạo điều khiển tất cả thời gian. Nó không chỉ giúp kết nối mọi thứ với nhau cho người đọc màn hình, mà còn giúp cho nhãn cũng như điều khiển có thể nhấp được.

Bạn có thể đọc chi tiết hơn một chút và tìm thấy một ví dụ ở đây: http://webaim.org/techniques/forms/screen_reader#labels

Answer 4

sử dụng Bootstrap, để tạo ra các nút xung quanh radiobutton:

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