html - propiedades - Cómo asociar etiquetas con botones de radio

radio button php ejemplo

Question

Estoy usando MVC, y tengo una configuración de botón de radio simple:

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

Lo único que me falta es que no puedes hacer clic en la etiqueta para seleccionar el botón de opción. Normalmente usarías:

<label for="my_flag">

pero eso asocia ambas etiquetas con el último botón de radio. ¿Hay alguna forma de asociar las etiquetas con el botón de opción correcto?

Nota: Esto es imitar un formulario en papel, por lo que cambiar a una casilla de verificación no es una opción.

Answer 1

Debe dar los dos botones de opción con el mismo nombre (para que estén en el mismo grupo), pero con diferentes identificadores (para que pueda asociar la etiqueta con cada uno individualmente). No estoy familiarizado con ASP.NET MVC, así que no sé cómo lograrlo, pero esa es la solución.

Editar: una segunda posibilidad es ajustar los botones de radio dentro de la etiqueta de etiqueta, de esta manera:

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

* Tenga en cuenta que de esta manera en realidad puede tener una mejor compatibilidad con el navegador, sé que algunos navegadores todavía son dudosos sobre la distinción nombre / identificación

Answer 2

No soy un programador asp, así que lo siento si digo algo: P

El atributo de etiqueta para hace referencia a la identificación de entrada. Entonces, tendrás que hacer algo como

<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

Puedes hacerlo así: (Esto está usando Razor, pero es fácil de traducir).

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

Básicamente se especifica manualmente el atributo id para los botones de opción.

Answer 4

Tienes dos formas diferentes de implementar esto.

La primera es la solución simple es insertar el botón de opción dentro de una <label/> .

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

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

La segunda ruta es asociar cada botón de radio con una ID. Esto también es bastante simple con el argumento htmlAttributes y permite una mayor flexibilidad con respecto al diseño del formulario:

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

Yo recomendaría este último, y parece ser el que está pidiendo también.

EDITAR

De hecho, deberías dar el argumento con el atributo ID sin importar qué. Si no lo hace, su sitio tendrá múltiples elementos con la misma ID, y esto no validará HTML.