Как связать ярлыки с переключателями

Question

Я использую MVC, и у меня есть простая настройка переключателя:

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

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

<label for="my_flag">

но это связывает обе метки с последним переключателем. Есть ли способ связать метки с правильной радиокнопкой?

Примечание. Это имитирует бумажную форму, поэтому переключение на флажок невозможно.

Answer 1

У вас есть два разных способа реализовать это.

Первое простое решение - встроить переключатель в тег <label/>.

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

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

Второй путь - связать каждую радиокнопку с идентификатором. Это также довольно просто с аргументом htmlAttributes и обеспечивает большую гибкость в отношении макета формы:

<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>

Я бы порекомендовал последнее, и, похоже, вы тоже его просите.

EDIT

На самом деле вы должны указать аргумент с атрибутом ID, несмотря ни на что. Если вы этого не сделаете, на вашем сайте будет несколько элементов с одинаковым идентификатором, и это не пройдет проверку HTML.

Answer 2

Вам необходимо присвоить двум радиокнопкам одинаковое имя (чтобы они были в одной группе), но разные идентификаторы (чтобы вы могли связать метку с каждый в отдельности). Я не знаком с ASP.NET MVC, поэтому я не знаю, как на самом деле это сделать, но это решение.

Редактировать: вторая возможность заключается в том, чтобы обернуть переключатели внутри тега метки, например:

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

* Обратите внимание, что этот способ на самом деле может иметь лучшую совместимость с браузерами, я знаю, что некоторые браузеры все еще сомневаются в различии имени и идентификатора

Answer 3

Я не программист asp, поэтому извините, если что-нибудь расскажу: P

Атрибут метки для ссылается на идентификатор ввода. Так что вам придется сделать что-то вроде

<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 4

Вы можете сделать это так: (Используется Razor, но его легко перевести.)

@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>

Обычно вы вручную указываете атрибут id для переключателей.