如何显示图像上的复选框以供选择？

我想在每个图像的右下角显示一个复选框。如何显示图像上的复选框以供选择？

我该怎么做这样的事情？

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

来源

2012-01-16 Vijay

我认为正确的方式来处理这可以通过采取'div'并将背景图像放在它和每个div中你可以有复选框。 – Murtaza 2012-01-16 09:20:02

这就是我所想的，但我不知道如何使用CSS（即如何为此构建HTML）！任何人都可以提供HTML/CSS来显示这个单一的图片？ – Vijay 2012-01-16 09:33:23

这可以用纯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。

来源

2012-01-16 09:35:20

非常感谢。这工作正常 – Vijay 2012-01-16 10:35:13

非常感谢它，它完美的作品.... – 2017-08-16 09:16:23

-2

如果是我我会尝试usign的jQuery的this.Lets假装每个图像在每个自己的DIV和checkbo有检查的ID：

$('div').click(function() 

    { 
     //you select the checkbox and ad the code to do what you want to it 

     ('#check'). 

    });

来源

2012-01-16 09:27:12 user1146440

你是什么意思？不完整的答案。问题是关于在图像上显示复选框。 – iammurtaza 2017-04-08 03:49:01

如果该复选框的唯一选择/ DIS-选择是你的要求，那么我会建议什么是下：

步骤1：将图像和块内的复选框（它可能是一个div或者表）
第2步：提供该块的相对位置与一些具体的高度和宽度。
第3步：对于复选框，给它绝对位置并设置右侧和底部间隙（根据您的要求）。

例如，代码应该是这样的

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

而且CSS对于同样是

.img_block {位置：相对;宽度：230px;保证金权：20px的;边距：10px的; height：30px;}
.chkbox {position：absolute;右：为5px;底部：3px;}

我希望这适合您的要求。

来源

2012-01-16 09:43:34

如何显示图像上的复选框以供选择？

回答

相关问题