Alternar el botón de opción HTML haciendo clic en su etiqueta

87

¿Existe una forma sencilla de hacer que un botón de radio cambie, cuando se hace clic en un texto cercano, sin introducir ningún gran Javascript Framework en mi pequeño proyecto PHP?

El formulario web tiene este aspecto:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

— Alexander Farber
fuente

164

También puede envolver sus elementos sin darles a cada uno un ID, ya que a <label>es implícitamente para la entrada que contiene, así:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— Nick Craver
fuente

4

Esto dificulta el estilo de la etiqueta y requiere que envuelva el texto en aún más elementos.

— Soviut

2

Sí, pero si no está diseñando, le resultará más fácil obtener la funcionalidad que desea. No me gusta tener que agregar un ID adicional y atributos "for".

— Dr. C. Hilarius

4

Las ID de +1 pueden ser muy malas, así que es mejor evitarlas como regla general

— Chris Stephens

el envoltorio es una solución superior al uso idy forsin envoltorio. La razón es que si la etiqueta tiene un margen amplio y el usuario hace clic en el punto óptimo entre la casilla de verificación y la etiqueta (como es más probable que lo haga), no sucede nada. Violín aquí: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

Puede usar <label>elementos, que están diseñados para hacer exactamente eso:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— Frédéric Hamidi
fuente

1

@Alexander, absolutamente. Solo Safari versión 2 e inferior no lo admite.

— Frédéric Hamidi

3

Y a partir de entonces puede usar el selector input#radCreateMode:checked ~ labelpara aplicar estilos a la etiqueta. No es posible aplicar estilos a las etiquetas tras la selección si anidamos la entrada dentro de la etiqueta.

— Zuhaib Ali

1

Esta realmente debería ser la respuesta aceptada, es la forma correcta de hacerlo.

— greco.roamin

1

Estoy usando Safari v 13 y este método no me funcionó. El botón de opción se puede deseleccionar, pero no seleccionar. Tuve que envolver la etiqueta alrededor de la entrada: <label> <input> my label text </label>. Tenga en cuenta que no estoy usando un <form>, ni un <fieldset>.

— IAM_AL_X

Asegúrese de que el valor del atributo for sea el id correcto para la entrada. Por si acaso si alguien cometiera el mismo error que yo.

— Kevin .NET

5

Envolver la entrada debajo de la etiqueta debería funcionar.

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— Jason Ching
fuente

1

Tuve problemas para encontrar el valor del botón de radio usando este método, una alternativa es usar un área de impacto que aumente el área de clic de un botón .

— Christopher Grigg
fuente