Question

我想在每张图片的右下角显示一个复选框供选择。

我该怎么办？

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

Answer 1

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

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。

Answer 2

如果只选择/取消选中复选框，那么我建议的内容如下：

步骤1：将图片和复选框放在一个块内（可能是div或table）
第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 {position：relative;宽度：230px;保证金权：20px的;边距：10px的;身高：30px;}
.chkbox {position：absolute;右：为5px;底部：3px的;}

我希望这符合你的要求。

Answer 3

如果是我，我会尝试使用jQuery。让我们假装每个图像都在每个自己的div中，并且复选框的ID为check：

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

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

       ('#check').

    });

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

3 个答案: