Zaznaczenie pola wyboru przez kliknięcie obrazu

Question

Mam pola wyboru pod miniaturami, tutaj: http://jsfiddle.net/pAYFa/ Chcę to zrobić, klikając miniaturę, pole wyboru zostanie zaznaczone. Myślę, że można to zrobić za pomocą javascript, ja postaram się o pomoc w javascript. Dzięki.

Answer 1

Po prostu umieść obraz w etykiecie i usuń duplikaty identyfikatorów. Zrobiłem to na pierwszy z nich: http://jsfiddle.net/karim79/pAYFa/1/

Każdy identyfikator w dokumencie musi być unikalny jak na specification.

Answer 2

Cóż, najprostszym sposobem byłoby umieszczenie etykiety wokół obrazu. To zrobi dokładnie to, co chcesz:

<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" /> 

Nie wymaga javascript! Będziesz musiał usunąć swój kod id="img1" ze znacznika <img>, ponieważ nie możesz mieć więcej niż jednego elementu o tym samym identyfikatorze.

Answer 3

Jak już odpowiedzieli powyżej, nie trzeba tego robić poprzez javascript, jeśli jesteś ciekawy jak dołączyć obsługę zdarzenia do obrazu. Musisz zmienić identyfikator pola wyboru na coś innego niż identyfikator obrazu. I przemianowany go 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

z jQuery jest to dziecinnie proste:

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

bez, staje się nieco trudniejsze. Dałem swoje pola wyboru unikalnego identyfikatora użytkownika (img1_cb i img2_cb) i dodano do obsługi kliknij, aby każdy obraz np

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

Wtedy JavaScript brzmiała:

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