选择复选框输入时，最简单的在图像上显示对勾标记的方法？

Question

我已使复选框输入不可见，并将其放在图像上，以便可以像复选框一样使用图像，但是，现在，我需要以某种方式指示何时选择和取消选择图像。这就是为什么我试图在选中图像时在图像上添加一个选中标记，并在取消选中图像时将其删除的原因。可悲的是，我不确定最好的方法是什么。

我应该在所选图像上显示另一幅图像吗？我是否应该使用纯CSS进行复选标记，所以不必使用图像。我将如何实施更改？任何提示和指示，将不胜感激。

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" name="categories[]" value="">
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Answer 1

只需在复选框旁边添加标签，然后使用 id 映射将其映射到复选框。在CSS中，只要使用:checked选择器选中复选框，我们就会将样式赋予标签。您可以将图像放在标签中。

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
}
.category-input:checked + label{
background:red; /* put your image here*/
 height: 50px;
  width: 50px;
  position: absolute;
 top:0;
 left:0;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' type="checkbox" id='checker' name="categories[]" value="">
    <label for="checker"></label>
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Answer 2

要实现您的想法，我们可以执行以下操作：

$(".img-box").click(() => {
let props = $(".category-input").css("display")
 $(".category-input").css('display', 
 	props === 'block' ? 'none' : 'block'
 )
})

.categories-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}
img{
  width: 100%;
  height: 100%;
}
.category-input {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 55;
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-wrapper">
    <img class="img-box"src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png'/>
    <input class='category-input' type="checkbox" checked>
</div>

希望它会有所帮助：）

Answer 3

如果您想使用默认复选框样式，则可以通过多种方式执行此操作，可以使用以下CSS：

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.category-input:checked {
    opacity: 1;
}

<div class="categories-wrapper">
    
    <input class='category-input' type="checkbox" name="categories[]" value="">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' class="category-image" />
    <input type="hidden" name="categoryFiles[]" value="">
</div>

或 您可以将其他图像用作选中的图标

.categories-wrapper {
    position: relative;
}
.category-input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
}
.selected-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}
.category-input:checked + .selected-icon {
    display: block;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' class="category-image" />
    <input class='category-input' type="checkbox" name="categories[]" value="">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Red_check.svg" class="selected-icon">
    <input type="hidden" name="categoryFiles[]" value="">
</div>

Answer 4

不需要Jquery
试试这个

   <div id="app">
        ...
        <div v-for="(entry, index) in entries" class="inventory-section">
            <input type="text" class="id-input" placeholder="Product Id" v-model="entry.productId" />
            <input type="text" class="description-input" placeholder="Description" v-model="entry.description" />
            <input type="text" class="qty-input" placeholder="Qty" v-model="entry.qty" />
            <input type="text" class="price-input" placeholder="Price" v-model="entry.price" />
            <span class="x-sign" v-on:click="removeEntry(index)>X</span>
        </div>
        ...
    </div>

.categories-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
}
img{
  width: 100%;
  height: 100%;
}
.category-input {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 55;
    opacity: 0;
}
.category-input:checked {
  opacity: 1;
}
.category-input + label {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

Answer 5

另一个适合您的解决方案。只需将CSS编辑为：

.categories-wrapper {
    position: relative;
    max-height: 400px;
    max-width: 400px;
}
.category-input {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    width: 10%;
    height: 10%;
    z-index: 99;
}

.selectMe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.category-input:checked {
    opacity: 1;
}

<div class="categories-wrapper">
    <img src='https://66.media.tumblr.com/4f3cbb1b66a76a19a9794a162373abc5/tumblr_inline_n258pbAEBc1qhwjx8.png' alt='Random image' />
    <input class='category-input' id="category-input" type="checkbox" name="categories[]" value="">
    <label for="category-input" class="selectMe"></label>
    <input type="hidden" name="categoryFiles[]" value="">
</div>