Autor Tema: JavaScript ¿Cómo Seleccionar control radio con click en su linea fuera de boton? (Leído 2261 veces)

LoboBlanco · « **en:** 10 de Febrero 2017, 20:51 »

Hola a todos

Estoy intentando presentar en pantalla un formulario de 4 lineas con control de boton radio, para seleccionar una de ellas.

Y que se pueda seleccionar haciendo click con el ratón en toda su linea, no solo haciendo click justo en el boton.

Supongo que es con alguna función que se active con el onclik en el div de esa linea, pero no se hacerlo.

He llegado a hacer que la linea cambie de color al pasar por encima el puntero del ratón, utilizando el onmouseover y el onmouseout.

¿Alguien podría ayudarme? Muchas gracias

El código que he hecho es:

Código: [Seleccionar]

<html>
<head>
<title>Control radio mejorado</title>
</head>
<body>

<form action="FORMULARIO_control_radio_mejoradob.php" method="post">

<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"  >
   <input type="radio" name="radio1" value="respuesta1" name="linea1"> Linea1
</div>

<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"  >
   <input type="radio" name="radio1" value="linea2" >Linea2
</div>

<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"  >
   <input type="radio" name="radio1" value="respuesta3">Linea3
</div>

<div onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"  >
   <input type="radio" name="radio1" value="respuesta4">Linea2
</div>

<br>
<input type="submit" name="Confirmar" value="Enviar Respuesta">


</form>

</body>
</html>

pedro,, · « **Respuesta #1 en:** 10 de Febrero 2017, 21:45 »

Hola LoboBlanco.

Para empezar recomendarte que leas el siguiente enlace donde puedes ver como colocar el código correctamente en tus consultas entre otras cosas.

https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Sobre tu consulta, me imagino que querrás decir JavaScript y no Java.
Para hacer que se seleccione el radio pulsando sobre el texto es suficiente con que el texto esté entre etiquetas "label" con la propiedad "for='nombreDelIdDelRadio'".

Código: [Seleccionar]

<input type="radio" name="radio1" value="respuesta1" id="opcion1"><label for="opcion1">Linea1</label>
o también se puede hacer que el radio este entre las etiquetas label, de esta forma no haría falta usar la propiedad for.

Código: [Seleccionar]

<label onmouseover="this.style.backgroundColor='lightblue'" onmouseout="this.style.backgroundColor=''"  >
   <input type="radio" name="radio1" value="linea2" >Linea2
</label>

Saludos.

LoboBlanco · « **Respuesta #2 en:** 10 de Febrero 2017, 22:20 »

Muchisimas gracias Pedro

Es lo que buscaba. Y de forma mucho más sencilla a lo que pensaba.

Próximas veces pondré el codigo correctamente, para que se lea mejor, mis disculpas y gracias

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: