点击图片检查复选框

Question

我在缩略图下有复选框，在这里：http://jsfiddle.net/pAYFa/我想通过点击缩略图来做到这一点，复选框得到检查。我认为这可以用JavaScript来完成，我会在JavaScript中提供任何帮助。谢谢。

Answer 1

只需将图像放入标签中，并删除重复的ID。我已经为您的第一个完成了：http://jsfiddle.net/karim79/pAYFa/1/

根据specification，文档中的每个ID必须是唯一的。

Answer 2

那么，最简​​单的方法就是在图片上贴上标签。这将做你想要的：

<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 javascript needed！不过，您必须从<img>标记中删除id="img1"，因为不能有多个具有相同ID的元素。

Answer 3

正如他们在上面回答的，你不需要通过JavaScript来完成，如果你对如何附加一个事件处理程序的图像好奇。您确实需要将复选框ID更改为除图像ID之外的内容。我把它改名为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

使用jQuery，这是孩子们的游戏：

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

没有，就显得有点困难。我给你的复选框唯一的ID（img1_cb和img2_cb），并添加一个单击处理每个图像例如：

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

然后JavaScript的是：

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