Easiest way to display a check mark over image when a checkbox input is selected?

Question

I've made the checkbox input invisible and put it over the image so that I could use the image like a checkbox, however, now I need to somehow indicate when an image has been selected and deselected. This is why I'm trying to add a check mark over the image when selected and remove it if deselected. Sadly, I am not sure what the best approach is.

Should I display another image over the selected image? Should I make the check mark using pure CSS so I don't have to use an image. How would I go about implementing the change?

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

you are trying to display a checkbox checked when the image is selected(clicked), right? — Arun AK, Dec 25 '18 at 07:52
When the checkbox input is clicked, which is placed over the image using absolute positioning. — Onyx, Dec 25 '18 at 07:54

score 3 · Accepted Answer · answered Dec 25 '18 at 08:12

Just add a label next to the checkbox and map it to the checkbox using id-for mapping. In css we will give the style to the label whenever the checkbox is checked using :checked selector. You can put you image in the label.

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

score 2 · Answer 2 · edited Dec 25 '18 at 08:36

One more solution for you. Just edited your CSS to:

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

score 0 · Answer 3 · edited Sep 22 '21 at 20:37

To implement your idea, we can do something like this:

$(".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>

score 0 · Answer 4 · answered Dec 25 '18 at 08:01

You can do this in many ways if you want a default checkbox style on checked you can use below 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>

Or You can use another image for checked icon

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

score 0 · Answer 5 · edited Sep 22 '21 at 20:37

There is no need to use jQuery. Try this instead:

.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;
}

<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 id="checkID">
    <label for="checkID"></label>
</div>

Easiest way to display a check mark over image when a checkbox input is selected?

5 Answers5