如何顯示圖像上的複選框以供選擇？

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。

Answer 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'). 

    }); 

Answer 3

如果該複選框的唯一選擇/ 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;}

我希望這適合您的要求。