Làm thế nào để kết hợp nhãn với nút radio

Question

Tôi đang sử dụng MVC, và tôi đã có một đơn giản thiết lập nút radio:

<%=Html.RadioButton("my_flag", True)%><label>Yes</label> 
<%=Html.RadioButton("my_flag", False)%><label>No</label> 

Điều duy nhất tôi đang thiếu là rằng bạn không thể nhấp vào nhãn để chọn nút radio. Thông thường bạn sẽ sử dụng:

<label for="my_flag"> 

nhưng liên kết cả hai nhãn với nút radio cuối cùng. Có cách nào để liên kết nhãn với nút radio chính xác không?

Lưu ý: Đây là bắt chước một mẫu giấy, do đó, chuyển sang hộp kiểm không phải là một tùy chọn.

Answer 1

Bạn cần phải cung cấp hai nút radio cùng tên (để chúng trong cùng một nhóm), nhưng khác nhau id (để bạn có thể kết hợp nhãn với mỗi một cá nhân). Tôi không quen thuộc với ASP.NET MVC, vì vậy tôi không biết làm thế nào để thực sự thực hiện điều này, nhưng đó là giải pháp.

Chỉnh sửa: a Khả năng thứ hai là để bọc các nút radio bên trong thẻ nhãn, như vậy:

<label><%=Html.RadioButton("my_flag", True)%>Yes</label> 
<label><%=Html.RadioButton("my_flag", False)%>No</label> 

* Lưu ý rằng cách này có thể thực sự có khả năng tương thích trình duyệt tốt hơn, tôi biết một số trình duyệt vẫn iffy về tên/id phân biệt

Answer 2

tôi không phải là một lập trình viên asp, vì vậy xin lỗi nếu tôi sẽ nói điều gì đó off: P thuộc tính

Label cho được tham chiếu để input id của. Vì vậy, bạn sẽ phải làm điều gì đó như

<input type="radio" name="rad1" id="rad1_1"><label for="rad1_1">Rad1</label> 
<input type="radio" name="rad1" id="rad1_2"><label for="rad1_2">Rad2</label> 

Answer 3

Bạn có hai cách khác nhau để thực hiện việc này.

Giải pháp đơn giản đầu tiên là nhúng nút radio bên trong thẻ <label/>.

<p> 
    <label><%=Html.RadioButton("option", "yes") %> Yes</label> 
</p> 

<p> 
    <label><%=Html.RadioButton("option", "no") %> No</label> 
</p> 

Đường thứ hai là liên kết từng nút radio với ID. Đây cũng là khá đơn giản với những lập luận htmlAttributes và nó cho phép linh hoạt hơn liên quan đến việc bố trí dạng:

<p> 
    <label for="option_yes">Yes:</label> 
    <%=Html.RadioButton("option", "yes", new { id = "option_yes" }) %> 
</p> 

<p> 
    <label for="option_no">Np:</label> 
    <%=Html.RadioButton("option", "no", new { id = "option_no" }) %> 
</p> 

Tôi muốn giới thiệu sau này, và nó có vẻ là một trong những bạn đang yêu cầu quá.

EDIT

Trong thực tế, bạn nên cung cấp cho các tranh cãi với ID thuộc tính không có vấn đề gì. Nếu bạn không làm điều này, trang web của bạn sẽ có nhiều phần tử với cùng một ID và điều này không xác thực được HTML.

Answer 4

Bạn có thể làm điều đó như thế này: (Điều này được sử dụng Razor, nhưng nó dễ dàng để dịch.)

@Html.RadioButtonFor(model => model.MyValue, true, new { id = "MyValue_True" }) 
<label for="MyValue_True">Yes, this is true</label> 

@Html.RadioButtonFor(model => model.MyValue, false, new { id = "MyValue_False" }) 
<label for="MyValue_False">No, this is false</label> 

Về cơ bản bạn tự xác định id thuộc tính cho các nút radio.