Marcando una casilla haciendo clic en una imagen

Question

Tengo casillas de verificación debajo de las miniaturas, aquí: http://jsfiddle.net/pAYFa/ Quiero hacer eso al hacer clic en la miniatura, se marca la casilla de verificación. Creo que esto se puede hacer con javascript, solicitaré cualquier ayuda en javascript. Gracias.

Answer 1

Simplemente coloque la imagen en una etiqueta y quite los ID duplicados. Lo he hecho para su primera: http://jsfiddle.net/karim79/pAYFa/1/

Cada ID en el documento debe ser único según el specification.

Answer 2

Bueno, la forma más fácil sería poner una etiqueta alrededor de su imagen. Esto hará exactamente lo que quiera:

<label for="img1"><img class="img" src="http://s5.tinypic.com/30v0ncn_th.jpg" /></label> 
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" /> 

¡No es necesario javascript! Sin embargo, tendrá que eliminar su id="img1" de su etiqueta <img>, ya que no puede tener más de un elemento con la misma identificación.

Answer 3

Como respondieron anteriormente, no es necesario hacerlo a través de javascript, si tiene curiosidad acerca de cómo adjuntar un controlador de eventos a la imagen. Debe cambiar el id. De casilla de verificación a otra cosa que no sea la ID de la imagen. Me cambió el nombre a chk2

document.getElementById('img2').onclick = function() //attach to onclick 
{        
     var checkbox = document.getElementById('chk2'); //find checkbox 

     checkbox.checked = !checkbox.checked; //toggle the checked status 
} 

Answer 4

con jQuery esto es un juego de niños:

$('img').click(function(){ 
    $(this).next().click(); 
}) 

sin, se hace un poco más difícil. Le di sus casillas de verificación de identificación únicos (img1_cb y img2_cb) y se añadió un controlador de clic a cada imagen, por ejemplo:

<img class="img" src="http://s5.tinypic.com/30v0ncn_th.jpg" id="img1" onclick="toggle('img1_cb')" /> 

Entonces el JavaScript fue:

function toggle(what){ 
    var cb = document.getElementById(what); 
    cb.checked = !cb.checked; 
}