Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

INPUT RADIO HTML

preguntó
Web
842 Vistas
2 Respuestas
abierta

HOLA AMIGOS...

TENGO UN PROBLEMA ESTOY TRATANDO DE DARLE SOLUCIÓN PERO EN NINGUNA PAGINA ENCUENTRO ALGO SIMILAR A LO QUE QUIERO HACER, OJALA Y ME PUEDAN AYUDAR, GRACIAS!!

Lo que quiero hacer es:

Que cuando selecciones un <input> de tipo radio, muestre una imagen, pero al seleccionar otro <input> se quite la imagen anterior y muestre la del <input> seleccionado.

Este es mi código de HTML, pero solo me muestra una imagen y conforme vas seleccionando los <input>, las imagenes se van recorriendo hacia abajo, lo que quiero es que al seleccionar otro input se quite la imagen del <input> anterior y muestre la del <input> seleccionado

Para mostrar los <input> y enlazar las imagenes por (Id)

<td>
  <input type="radio" name="citizenship" id="name1" onchange="traer()" onclick = 
  "javascript:varch=document.getElementById('acta');ch.style.display='inline' ; " />Alvaro Obregon

  <input type="radio" name="citizenship" id="name2" onchange="traer1()" onclick = "javascript:  
  varsl=document.getElementById('img2');sl.style.display='inline' ; " />Benito Juarez

  <input type="radio" name="citizenship" id="name3" onchange="traer2()" onclick = "javascript: var 
  jl=document.getElementById('img3');jl.style.display='inline' ; " />Azcapotzalco
</td>

Imagenes para mostrar

<div id="mapa" class="contenedor">
  <img class="img1" size="25" id="acta" name="acta" src="IMAGENES/mapa/img1.png" style="display: none";/>
  <img class="img1" size="25" id="img2" name="img2" src="IMAGENES/mapa/img2.png" style="display: none"; />
  <img class="img1" size="25" id="img3" name="img3" src="IMAGENES/mapa/img3.png" style="display: none"; />
</div>
por Miller (410 puntos) en Web

2 Respuestas

2votos

magarzon Puntos30650

La solución más sencilla es añadir y/o quitar una clase que es la que decidirá si el elemento se muestra o no.

Imagina que tienes un css así:

.contenedor img {
  display: none;
}

.contenedor img.seleccionado {
  display: inline;
}

Este css lo que hace es ocultar todas las imágenes que están en el div contenedor, salvo aquella que tenga la clase "seleccionado".

Entonces, en el javascript, lo que tienes que hacer es que cuando se seleccione un input, quitar la clase "seleccionado" al elemento que la tenga puesta (si hay alguno) y ponérsela al que le corresponda.

Con librerías o frameworks como jQuery o AngularJS sería sencillísimo, pero vamos a usar métodos del DOM. El html de la parte de los input y javascript sería así (he metido el script de javascript con la función inline, lo suyo sería que estuviera en un fichero aparte, además, en la parte de las imágenes tendrías que quitar el style="display: none", pues ya lo hace el CSS que vamos a añadir)

<td>
  <input type="radio" name="citizenship" id="name1" onchange="traer()" onclick = "seleccionar('acta'); " >Alvaro Obregon

  <input type="radio" name="citizenship" id="name2" onchange="traer1()" onclick = "seleccionar('img2');" >Benito Juarez

  <input type="radio" name="citizenship" id="name3" onchange="traer2()" onclick = "seleccionar('img3');" >Azcapotzalco
</td>

<script>
function seleccionar(imgId) {
   var seleccionado = document.getElementsByClassName('seleccionado');
   //Quitamos todos los que tengan la clase, en teoría 1 o ninguno, pero por si acaso hacemos un for sobre el NodeList que nos devuelve la función anterior
   for (var i = 0; i < seleccionado.length; i++) {
    var element= seleccionado[i];
    element.classList.remove('seleccionado');
   }

   //Y ahora se lo añadimos al nuevo seleccionado
   seleccionado = document.getElementById(imgId);
   seleccionado.classList.add('seleccionado');

}
</script>

Esta solución no está soportada por IE9, porque no soporta classList, si necesitas soportarlo, es fácil de cambiar, o si no, usa jQuery y te olvidas d e problemas de compatibilidad.

por magarzon (30.650 puntos)
editado por

1voto

Miller comentado

Gracias amigo!! Me funciono Saludos

por Miller (410 puntos)

2votos

Leonardo-Tadei Puntos227320

Hola @Miller,

otra solución sencilla y compatible con todo navegador es tener un elemento IMG vacío y cambiar el SRC para ponerle las imágenes:

<!DOCTYPE html>
<html>
<head>
<title>img</title>
<meta name="generator" content="Bluefish 2.2.9" >
<meta name="author" content="leo" >
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

  <input type="radio" name="citizenship" id="name1" onclick="javascript:document.getElementById('imagen').src='https://pegasus-net.com.ar/img/barra.jpg';" />Alvaro Obregon

  <input type="radio" name="citizenship" id="name2" onclick="javascript:document.getElementById('imagen').src='https://www.pegasusnet.com.ar/Archivos/nubePrivada.png';" />Benito Juarez

  <input type="radio" name="citizenship" id="name3" onclick="javascript:document.getElementById('imagen').src='https://www.pegasusnet.com.ar/Archivos/LAP2020-panel02-ch.jpg' ; " />Azcapotzalco

<hr />

<div id="contenedor"><img src="" id="imagen" alt="Imagen a Mostrar"></div>

</body>
</html>

Yo en el ejemplo puse imágenes de la web, pero podrían ser imágenes almacenadas en tu propio sitio y con rutas relativas.

Saludos cordiales!

por Leonardo-Tadei (227.320 puntos)

2votos

Miller comentado

Gracias me ha funcionado!! Y es más fácil, Saludos

por Miller (410 puntos)

1voto

Peter comentado

@Miller por favor selecciona la respuesta como correcta.

por Peter (150.480 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta