html - 如何在图像上显示复选框以供选择？

Question

我想在每张图片的右下角显示一个用于选择的复选框..

我怎样才能做这样的事情？

请记住，点击图片有一个独特的事件(我会设法做到!)，但是点击那个复选框应该选择/取消选择那个吗？

Answer 1

这可以使用纯 CSS 来完成，假设您为所有图像设置了固定的宽度和高度。诀窍是为复选框设置绝对位置，然后将 bottom 和 right 分配给零。

HTML 示例:

<div class="container">
    <img src="image1.jpg" /> 
    <input type="checkbox" class="checkbox" id="check1" />
</div>
<div class="container">
    <img src="image2.jpg" />
    <input type="checkbox"  class="checkbox" id="check2" />
</div>

CSS:

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

Live test case .

至于点击事件，只需将点击处理程序应用到每个复选框，它就可以正常工作。参见 this updated fiddle .