单击图像选中复选框

Question

我在缩略图下面有复选框，这里： http ： //jsfiddle.net/pAYFa/我想通过点击缩略图，复选框进行检查。 我认为这可以通过javascript完成，我会在javascript中使用任何帮助。 谢谢。

Answer 1

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

根据规范 ，文档中的每个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" />

不需要javascript！ 您必须从<img>标签中删除您的id="img1" ，因为您不能拥有多个具有相同ID的元素。

Answer 3

如上所述，如果您对如何将事件处理程序附加到图像感到好奇，则无需通过javascript执行此操作。 您需要将复选框ID更改为图像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;  
}