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

LoboBlanco

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 25
    • Ver Perfil
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>
« Última modificación: 17 de Abril 2017, 20:18 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
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. ;D
« Última modificación: 10 de Febrero 2017, 21:55 por pedro,, »

LoboBlanco

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 25
    • Ver Perfil
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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".