Hacer clic en el texto para seleccionar el botón de radio correspondiente


86

Estoy creando una aplicación web de prueba usando PHP. Cada pregunta se compone de una pregunta separada <label>y tiene 4 opciones posibles, que se utilizan radio buttonspara permitir que el usuario seleccione su respuesta. El HTML actual para una sola pregunta se ve así:

<label for="349">What is my middle name?</label>
<br>
<input id="349" type="radio" value="1" name="349">Abe
<br>
<input id="349" type="radio" value="2" name="349">Andrew
<br>
<input id="349" type="radio" value="3" name="349">Andre
<br>
<input id="349" type="radio" value="4" name="349">Anderson
<br>

Me gustaría que el usuario tuviera la opción de hacer clic en el texto asociado con el botón de opción. En este momento, el usuario solo puede hacer clic en el botón de opción, lo que me parece una tarea bastante engorrosa.

Leí No se puede seleccionar una opción de botón de opción en particular al hacer clic en el texto de la opción y la sugerencia apunta a hacer coincidir los atributos fory idde las etiquetas. He hecho esto y todavía no funciona.

Mi pregunta es: me gustaría poder hacer clic en el texto de un <input type="radio">objeto, en lugar de poder seleccionar solo el botón de opción. Sé que he leído sobre esto antes, pero parece que no puedo encontrar ninguna solución a mi problema. ¡Cualquier ayuda o sugerencia es muy apreciada!

Respuestas:


176

En su código, tiene una etiqueta en el formulario en sí. Desea poner etiquetas en cada grupo de radio individual, como se muestra a continuación.

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">
  <label for="349">Abe</label>
  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">
  <label for="351">Andre</label>
  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form>

Debe tener en cuenta que dos elementos nunca deben tener el mismo ID. El nameatributo se utiliza para que los botones de opción funcionen como un grupo y solo permitan una única selección a la vez.


7
Excelentemente simple. Me encanta cuando se redescubre una característica casi oculta de las etiquetas
foochow

37

Parece haber un pequeño espacio en el que no se puede hacer clic entre el botón de opción y la etiqueta si se hace de acuerdo con la respuesta de Nathan . A continuación, se explica cómo hacer que se unan sin problemas (consulte este artículo ):

<form>
    <p>What is my middle name?</p>
    <br>
    <label><input id="349" type="radio" value="1" name="question1">Abe</label>
    <br>
    <label><input id="350" type="radio" value="2" name="question1">Andrew</label>
    <br>
    <label><input id="351" type="radio" value="3" name="question1">Andre</label>
    <br>
    <label><input id="352" type="radio" value="4" name="question1">Anderson</label>
    <br>
</form>

2
Prefiero esta respuesta. Pero, ¿está seguro de que necesita los atributos "para" con este enfoque?
Piddu

@Piddu: Creo que tienes razón, así que actualicé mi respuesta. ¡Gracias!
user21820

Otra opción para evitar el espacio adicional entre el botón de opción y la etiqueta es simplemente no ponerlo allí <input id="349" type="radio" value="1" name="question1"><label for="349"> Abe</label>(sin espacios ni líneas nuevas entre las etiquetas)
Arye Eidelman

1
Acabo de probar mi camino en Chrome y Firefox y descubrí que reduce el espacio en el que no se puede hacer clic de 7 a 3 píxeles al eliminar el carácter de espacio. vea por qué-hay-una-brecha-inexplicable-entre-estos-elementos-div-bloque-en-línea . los tres píxeles restantes son el margen derecho predeterminado en el botón de radio margin: 3px 3px 0 5px;(es más notable en Firefox ya que hay un efecto de desplazamiento por defecto) que se puede arreglar con CSS eliminando el margen y reemplazándolo con relleno.
Arye Eidelman

1
@AryeDovEidelman: Ya veo, ¡gracias por investigar! Aunque por simplicidad, me limitaré a incluir todo en la etiqueta. =)
user21820

1

La etiqueta debe estar alrededor de cada respuesta, por ejemplo, alrededor de Abe, Andrew, etc. y debe ser única para cada una de ellas.


1

Anidar la etiqueta de entrada dentro de la etiqueta de etiqueta asegura que la etiqueta aparezca justo al lado del botón de opción. Con los enfoques anteriores sugeridos, puede colocar la etiqueta de la etiqueta en cualquier lugar dentro del archivo html y seleccionará el botón de radio asociado cuando se haga clic. Mira esto:

<html>
<body>

<form>
  <p>What is my middle name?</p>
  <br>
  <input id="349" type="radio" value="1" name="question1">

  <br>
  <input id="350" type="radio" value="2" name="question1">
  <label for="350">Andrew</label>
  <br>
  <input id="351" type="radio" value="3" name="question1">

  <br>
  <input id="352" type="radio" value="4" name="question1">
  <label for="352">Anderson</label>
  <br>
</form><br/>
<p>This is a paragraph</p>
  <label for="349">Abe</label><br/>
  <label for="351">Andre</label>
  
</body>
</html>

En cambio, hacerlo de esta manera elimina este defecto:

<form>
  <p>What is my middle name?</p>
  <br>
  
  <label>
    <input id="349" type="radio" value="1" name="question1"/>Abe
  </label>
  <br>
  
  <label>
    <input id="350" type="radio" value="2" name="question1"/>Andrew
  </label>
  <br>
  
  <label>
    <input id="351" type="radio" value="3" name="question1"/>Andre
  </label>
  <br>
  
  <label>
    <input id="352" type="radio" value="4" name="question1"/>Anderson
  </label>
  <br>
</form>


0

Puedes hacerlo así

 <label for="1">hi</label>
 <input type="radio" id="1" />

Entonces, si hace clic en el texto o la etiqueta, selecciona el botón de opción. Pero si haces esto ...

<label for="1">//</label>

y agrega esto al código que escribí justo antes de esto, entonces si hace clic en la segunda etiqueta, también seleccionará la radio.


0

He estado haciendo esto durante años, pero ninguno de estos funciona para mí, usando variables.

    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname</label> $lname<br />\n";
    echo "<input type='radio' name='student' id='$studentID' value='$studentID'>
        <label for='$studentID'>$fname $lname</label><br />\n";

y aquí está la fuente:

        <input type='radio' name='student' id='986875' value='986875'>
        <label for='986875'>John</label> Brown<br />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.