javascript - 如何實現，網頁中點擊圖片後，圖片被選中而且顯示打鉤

Question

首先，先貼這是相簿的HTML

<p class="main-body">
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered" data-am-gallery ="{  }" id="uldata">
<volist name="imgdata" id="imgdata">
<li>
<p class="am-gallery-item" id="{$imgdata.id}">
<a href="{$url}{$imgdata.image}">
<img class="imgyes" src="{$url}{$imgdata.image}" alt="{$imgdata.note}" id="imgid{$imgdata.id}" style="width: 245px;height: 147px"/>
<h3 class="am-gallery-title">{$imgdata.name}</h3>
<p class="am-gallery-desc">{$imgdata.time|date='Y-m-d H:i:s',###}
</p>
</a>
</p>
</li>
</volist>
</ul>

說明一些：上面程式碼中，

（id是imgdata）內是前端框架的規範，可以無視。
是後端用來輸出的，也可以無視。 {$imgdata.name}也是後端使用的。

相簿圖片：

想實現的類型微信的點擊相應圖片並打鉤的效果：


我現在大概的思路是在CSS中寫打鉤的HTML效果。點選對應圖片之後透過js加入Class實現打鉤的效果（只能打鉤一個）。
因為我CSS知識比較薄弱，現在希望有更好的實作想法或是對應CSS與jQuery程式碼。

其實更多希望有實現圖片打鉤的CSS代碼。

無論如何，感謝了。

Answer 1

https://codepen.io/zengkan070...
這是簡單寫的一個 demo。原理就是：在圖片上面設定一個單獨的元素，用來表示對號。透過點擊來控制它的顯示隱藏。

Answer 2

先寫一個css類，例如 .ok，负责钩号的位置
然后再给所有的 am-gallery-item 类添加点击事件
当点击该类的时候给该元素添加 .ok 類

如果你想知道哪些元素被選中，只需要取得所有擁有.ok類別的元素即可

Answer 3

照片上方覆蓋一層選取層，效果自訂，預設隱藏；
照片選取與否，綁定到一個布林值數組中；
照片點擊後，數組對應的物件取反操作並綁定到覆蓋層上；
一點粗淺的思路，不知道能否幫到答主，也許有現成組件，不需要重複造輪子。

Answer 4

你要的打勾操作，可以只用 html+css 實作。

結構可以用：

checkbox 隱藏，用來標記是否選中；
後面的 p 做打勾圖，用 :checked 和 兄弟選擇器 '+' 判斷是否顯示；
label 修飾checkbox, 圖片可以放到 label 的背景中，好處有

1. 類似lazyload 效果，像分頁器後面的圖用到才請求；

2. background-size: contain 可以使圖片完整顯示；

Answer 5

做一個兩層的結構，最外層的p背景圖片設定為不同的背景圖，裡層放一個p，高度寬度100%，用來做遮罩效果，預設隱藏。當點選外層p時，透過js設定裡層的p顯示，就出現了類似的效果。