Html 如何在图像上显示复选框以供选择？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8877807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display the checkbox over the images for selection?
提问by Vijay
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?
请记住，点击图像有一个独特的事件（我会设法做到！），但是点击那个复选框应该选择/取消选择那个？
回答by Shadow Wizard is Ear For You
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 bottomand rightto zero.
这可以使用纯 CSS 来完成，假设所有图像的宽度和高度都是固定的。诀窍是为复选框设置绝对位置，然后分配bottom和right为零。
HTML sample:
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:
CSS：
.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }
As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.
至于点击事件，只需将点击处理程序应用于每个复选框，它就可以正常工作......请参阅此更新的小提琴。
回答by abhijeet kumar
If only selecting/dis-selecting of the checkbox is your requirement then What I would suggest is as under :
Step 1:Place the image and the checkbox inside a block (may it be a div or table)
Step 2:Provide that block relative position with some specific height and width.
Step 3:For checkbox, give it absolute position and set the right and bottom gaps (based on your requirement).
如果仅选择/取消选择复选框是您的要求，那么我的建议如下：
步骤 1：将图像和复选框放在块内（可能是 div 或表格）
步骤 2：提供该块相关具有特定高度和宽度的位置。
第 3 步：对于复选框，给它绝对位置并设置右侧和底部间隙（根据您的要求）。
For instance, the code should look like this
例如，代码应该是这样的
<div class="img_block">
<img src="image-path" alt="" />
<input type="checkbox" class="chkbox" />
</div>
<div class="img_block">
<img src="image-path" alt="" />
<input type="checkbox" class="chkbox" />
</div>
And the cssfor the same is
.img_block {position:relative; width:230px; margin-right:20px; margin-bottom:10px; height:30px;}
.chkbox {position:absolute; right:5px; bottom:3px;}
I hope this suits your requirement.
同样的css是
.img_block {position:relative; 宽度：230px；边距右：20px; 底边距：10px；高度：30px；}
.chkbox {位置：绝对；右：5px；底部：3px;}
我希望这适合您的要求。
回答by user1146440
If it were me I would try usign jQuery for this.Lets pretend that each image is in each own div and the checkbo has an id of check:
如果是我，我会为此尝试使用 jQuery。让我们假设每个图像都在每个自己的 div 中，并且 checkbo 的 id 为 check：
$('div').click(function()
{
//you select the checkbox and ad the code to do what you want to it
('#check').
});
