checkbox hecho con imagenes

dieguicho · #1 (**permalink**) 18/01/2003, 20:14

hola gentes.. estoy tratando de hacer un checkbox pero con imagenes.
andar anda... pero... cuando uno esta clickeado por ej. para clickear o desclickear el otro hay que hacer dos clickes..
que puede estar pasando?
aca les dejo el codigo
gracias totales

<SCRIPT LANGUAGE="JavaScript">
<!--

var imageNum = 1

image1 = new Image()
image1.src = "img/unchecked.gif"
image2 = new Image()
image2.src = "img/checked.gif"

function cambiar(id) {
if ( imageNum == 1 ) {
document.getElementById('checkbox_'+id).src = image2.src
imageNum = 2
} else {
document.getElementById('checkbox_'+id).src = image1.src
imageNum = 1
}
}

//
</SCRIPT>
<a href="Javascript:cambiar('1')""><img id="checkbox_1" name="checkbox_1" src="img/unchecked.gif" width="40" height="35" border="0"></a>
<a href="Javascript:cambiar('2')""><img id="checkbox_2" name="checkbox_2" src="img/unchecked.gif" width="40" height="35" border="0"></a>

Kaopectate · #2 (**permalink**) 18/01/2003, 21:36

Hola dieguicho.

Estudiando tu problema he encontrado que el problema es que la variable que estás usando "imageNum" te lleva cuenta del estado de uno de los checkboxes, pero tendrías que usar dos variables distintas para controlar dos checks.

Te propongo una solución que no depende de una variable externa sino que pregunta por la imagen almacenada dentro del elemento. De este modo te va a funcionar si amplias el modelo a diecisiete checks.

Código PHP:

  <html> 
 <head> 
  <SCRIPT LANGUAGE="JavaScript"> 
  <!--  
   image1 = new Image(); 
   image1.src = "unchecked.gif"; 
   image2 = new Image(); 
   image2.src = "checked.gif"; 
 
   function cambiar(id) { 
    if ( document.getElementById('checkbox_'+id).src != image1.src ) { 
     document.getElementById('checkbox_'+id).src = image1.src; 
    } else { 
     document.getElementById('checkbox_'+id).src = image2.src; 
    } 
   } 
  --> 
  </SCRIPT> 
 </head> 
 <body> 
  <a href="Javascript:cambiar('1')""><img id="checkbox_1" name="checkbox_1" src="unchecked.gif" width="40" height="35" border="0"></a>  
  <a href="Javascript:cambiar('2')""><img id="checkbox_2" name="checkbox_2" src="unchecked.gif" width="40" height="35" border="0"></a> 
 </body> 
</html>

Nota: donde dice java script, debería decir JavaScript.

Saludos.

dieguicho · #3 (**permalink**) 18/01/2003, 23:13

funciona perfecto
pero.. a que te referias con ampliar a 17 checks?
lo probe con esos dos nomas. lo leere de una db asi que pueden ser muuuchos

gracias!!!

Kaopectate · #4 (**permalink**) 19/01/2003, 07:58

A eso me refiero, como lo estabas haciendo, necesitabas una variable por cada check, ahora no. Puedes ampliar el número de checks hasta donde lo necesites.

Saludos.

dieguicho · #5 (**permalink**) 19/01/2003, 12:24

listo!
muchas gracias

vitimgm01 · #6 (**permalink**) 23/08/2010, 08:39

Como hago para que solo se pueda seleccionar uno?