checkbox "botón" con imagenes

besotico · #1 (**permalink**) 10/12/2011, 22:23

Amigos del foros del web, traigo la siguiente duda que espero me ayuden a solucionar

En primer lugar quería convertir checkbox en imágenes, lo logré mediante el siguiente código

Código HTML:

Ver original<html>  
 <head>  
 <script type="text/javascript">  
 function check(checkboxid) {  
 document.getElementById(checkboxid).checked = "checked";  
 }  
 </script>  
 </head>  
 <body>  
 <img src="imagen_disponible" onclick="javascript:check('chk_id');">  
 <input type="checkbox" id="chk_id" />  
 </body>  
</html>

chk_id sera correlativo de 1 a 200

con esto, logo convertir una imagen en un checkbox, pero me gustaría lograr una especie de botón con la imagen, es decir, una vez que clickeo y que se selecciona el checkbox la imagen cambie de estado, en definitiva que el usuario sepa que clikeo esa imagen, se entiende?

saludos y gracias

emprear · #2 (**permalink**) 11/12/2011, 15:00

@besotico, vas a tener problemas con esa estructura, suponiendo que los usuarios destilden el checkbox.

Para hacer o no el cambio, primero deberías comprobar el estado del checkbox.

Usa esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chk img</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
 
 function testchk(){
var valor = document.getElementById('chk_id').checked; 
alert(valor);
}
function check(checkboxid,imag,defecto) {  
var valor = document.getElementById(checkboxid).checked;
 
if (valor == false){
document.getElementById(checkboxid).checked = true;  
document.getElementById(imag).src = imag + ".jpg";  
}else{
document.getElementById(checkboxid).checked = false;  
document.getElementById(imag).src = defecto;   
}
 
}  
//]]>
</script>
</head>
<body>
<img src="uno.jpg" onclick="check('chk_id',this.id,'uno.jpg');" width="50" height="50" id="lupa" alt="" name="lupa" />
<form action="#">
<p>
<input type="checkbox" id="chk_id" value="si" />
</p>
</form>
<p>
<br />
 <a href="#" onclick="testchk();">Verificar</a> 
</p>
</body>
</html>

Algunos detalles, para cargar la imagen cuando esta activo uso el id=lupa, ya que mi imagen se llama lupa.jpg.
paso tres parámetros a la función, el primero es el checkbox que debe afectar, el segundo, el id de la imagen para reemplazar por id + .jpg y el tercero para restablecer a la imagen por defecto cuando desmarcan, para verificar te deje un link y otra función testchk();
Cuando hagas las pruebas no uses el checkbox, usá siempre la imagen, y una vez verificado, simplemente oculta el checkbox con style="display: none;"
eso sí, tendría que hacer tus imágenes bien descriptivas

Saludos

Saludos

besotico · #3 (**permalink**) 06/01/2012, 19:29

muchas gracias!

ryugen · #4 (**permalink**) 07/01/2012, 08:18

En un proyecto para tablet tu ve que realizar mejoras visuales sobre los checkbox (reemplazarlos por imagenes) los controles se veian muy pequeños. Entonces realize lo siguiente, puedes verlo en el ejemplo:
http://jsfiddle.net/p4bl1t0/BG7wQ/