如何显示图片上的复选框以供选择？ [英] How can I display the checkbox over the images for selection?

问题描述

我想在每个图片的右下方显示一个复选框。

我如何做这样的事？

请记住，点击图片有一个唯一的事件（我会设法做！），但点击该复选框应该选择/取消选择那个？

解决方案

这可以使用纯CSS，假设你有固定的宽度和高度的所有图像。诀窍是为复选框设置绝对位置，然后将底部和右分配为零。<​​/ p>

HTML示例：

 < div class = > 
< img src =image1.jpg/> 
< input type =checkboxclass =checkboxid =check1/> 
< / div> 
< div class =container> 
< img src =image2.jpg/> 
< input type =checkboxclass =checkboxid =check2/> 
< / div> 
  

CSS：

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

Live测试用例。

对于点击事件，只需对每个复选框应用点击处理程序，它会工作正常..见这个更新的小提琴。

I want to display a checkbox for selection on the right bottom of every image..

How can i do something like this?

Please remember that clicking on image has a unique event(that i'll manage to do!) , but clicking on that check box should select/deselect that one?

解决方案

This can be done with pure CSS, assuming you have fixed width and height for all images. The trick is setting absolute position for the checkbox then assign bottom and right to zero.

HTML sample:

<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.

As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.

这篇关于如何显示图片上的复选框以供选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！