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

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

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

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

<label for="my_flag">

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

Примечание. Это подражает бумажной форме, поэтому переход на флажок не является вариантом.

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Первое из них - простое решение - вставить переключатель в тег <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>

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

ИЗМЕНИТЬ

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

Ответ 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>

Ответ 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 для переключателей.