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

¿Hay alguna forma sencilla de activar o desactivar un botón de opción, cuando se hace clic en un texto cercano sin introducir un gran marco de Javascript en mi pequeño proyecto PHP?Alternar el botón de opción HTML haciendo clic en su etiqueta

El formulario web tiene el siguiente 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>

Fuente

2010-11-18 Alexander Farber

130

También puede envolver sus elementos sin dándoles cada una una ID, ya que <label> es implícitamente para la entrada que contiene, como esta:

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

Fuente

2010-11-18 09:23:59

Esto hace que diseñar la etiqueta sea más difícil y requiere envolver su texto en más elementos. – Soviut

Sí, pero si no está estilizando, es más fácil obtener la funcionalidad que desea. No me gusta tener que agregar ID extra y atributos "para". –

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

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

Fuente

2010-11-18 09:16:16

Gracias, ¿funciona en todos los navegadores modernos? –

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

Y a partir de entonces puede usar el selector 'input # radCreateMode: checked ~ label' para aplicar estilos a la etiqueta. No es posible aplicar estilos a etiquetas una vez seleccionados si anidamos la entrada dentro de la etiqueta. –

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

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

Fuente

2015-11-29 03:14:37

Esta respuesta no se basa en la propiedad de identificación, ¡algo bueno! – user1068352

tuve problemas para encontrar el valor del botón de radio que utiliza este método, una alternativa es utilizar un área activa increasing clickable area of a button.

Fuente

2016-12-06 02:15:02

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

Respuesta

Cuestiones relacionadas