Use Images Like Checkboxes

Use images like checkboxes

Pure semantic HTML/CSS solution

This is easy to implement on your own, no pre-made solution necessary. Also it will teach you a lot as you don't seem too easy with CSS.

This is what you need to do:

Your checkboxes need to have distinct id attributes. This allows you to connect a <label> to it, using the label's for-attribute.

Example:

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

Attaching the label to the checkbox will trigger a browser behaviour: Whenever someone clicks the label (or the image inside it), the checkbox will be toggled.

Next, you hide the checkbox by applying for example display: none; to it.

Now all that is left to do is set the style you want for your label::before pseudo element (which will be used as the visual checkbox replacement elements):

label::before {
    background-image: url(../path/to/unchecked.png);
}

In a last tricky step, you make use of CSS' :checked pseudo selector to change the image when the checkbox is checked:

:checked + label::before {
    background-image: url(../path/to/checked.png);
}

The + (adjacent sibling selector) makes sure you only change labels that directly follow the hidden checkbox in the markup.

You can optimize that by putting both images in a spritemap and only applying a change in background-position instead of swapping the image.

Of course you need to position the label correctly and apply display: block; and set correct width and height.

Edit:

The codepen example and snippet, which I created after these instructions, use the same technique, but instead of using images for the checkboxes, the checkbox replacements are done purely with CSS, creating a ::before on the label that, once checked, has content: "✓";. Add some rounded borders and sweet transitions and the result is really likable!

Here is a working codepen that showcases the technique and doesn't require images for the checkbox:

http://codepen.io/anon/pen/wadwpx

Here is the same code in a snippet:

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="checkbox"][id^="cb"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked+label {
  border-color: #ddd;
}

:checked+label::before {
  content: "✓";
  background-color: grey;
  transform: scale(1);
}

:checked+label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

<ul>
  <li><input type="checkbox" id="cb1" />
    <label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
  </li>
  <li><input type="checkbox" id="cb2" />
    <label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
  </li>
  <li><input type="checkbox" id="cb3" />
    <label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
  </li>
  <li><input type="checkbox" id="cb4" />
    <label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
  </li>
</ul>

is it possible put image in input type=check box?

I found the way how give image to checkbox & radio button with pure css.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type=checkbox]:checked + label {
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Check this for more http://css-tricks.com/the-checkbox-hack/ ,

https://gist.github.com/592332

Using image for checkbox input

Add Border for img with transparent

label img {
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

https://codepen.io/anon/pen/PVRxRM

Using a background-image for checkbox

You can just do it with label

   input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 0 0 0 0px;
    background:url("https://pbs.twimg.com/profile_images/550291079719698432/LbybHjIh.jpeg") no-repeat;
    height: 125px;
    width: 125px;;
    background-size: 50%;
}

input[type=checkbox]:checked + label {
    background:url("http://contentservice.mc.reyrey.net/image_v1.0.0/2267461") no-repeat;
    height: 125px;
    width: 125px;
    display:inline-block;
    background-size: 50%;
}

Html

<input type="checkbox" name="fordCheckBox" id="Ford" value="Ford">
<label for="Ford"></label>

Please check updated jsfiddle
https://jsfiddle.net/s4nr6q3d/

How to make checkboxes with images

This is how you can simulate an image based checkbox using a label

input {  display: none}
/*  switch image  */label[for="chk1"] {  display: inline-block;  text-align: center;  width: 100px;  height: 100px;  border: 2px solid black;  background: url(http://placehold.it/100/f00);}#chk1:checked ~ label[for="chk1"] {  background: url(http://placehold.it/100/ff0);}
/*  add content  */label[for="chk2"] {  display: inline-block;  text-align: center;  width: 100px;  height: 100px;  border: 2px solid black;  position: relative;}#chk2:checked ~ label[for="chk2"]::after {  content: 'V';  position: absolute;  left: 0;  right: 0;  font-size: 90px;  font-weight: bold;  font-family: arial;}

<input id="chk1" type="checkbox"><input id="chk2" type="checkbox">
<label for="chk1"></label><label for="chk2"></label>
<div>Click a box to toggle it</div>

Show image based on checkbox selection

This is one way to do it below, but you logic doesn't make sense... you only have 9 checkboxes so 'third image' === 7 - 9 and 'fourth image' === 'all selected' will overlap.

i.e. this case...

} else if (selected.length === images.length) {
   hideImagesExcept(3)
}

will never be called.

$(document).ready(function (){  var options = $('input.js-toggler'),      images = $('.js-toggle-image');
  $('input').click(function() {      var category = $(this).val();      if (!$(this).attr('checked')) $('.' + category).hide();      else $('.' + category).show();
      var selected = options.filter(function(){          return this.checked === true;      })
      if (selected.length === 0) {        images.hide();      } else if (selected.length > 0 && selected.length < 4) {         hideImagesExcept(0)      } else if (selected.length > 3 && selected.length < 7) {         hideImagesExcept(1)      } else if (selected.length > 6 && selected.length < 10) {         hideImagesExcept(2)      } else if (selected.length === images.length) {         hideImagesExcept(3)      }   });
   function hideImagesExcept(index) {      var hideThese = images.filter(function (){         return images.eq(this) !== index      })      hideThese.hide()      images.eq(index).show()   }})

.categorya, .categoryb, .categoryc, .categoryd, .categorye, .categoryf, .categoryg, .categoryh, .categoryi {    display:none;    font-size:13px;    color:#000000;    font-family:sans-serif;}.js-toggle-image {  display:none;}p.info{    padding:30px 20px 0 20px;    color:#000;    font-family:sans-serif;    font-size:13px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="filter-categorya" class="js-toggler" type="checkbox" value="categorya"> <label for="filter-categorya">Category A</label><br><input id="filter-categoryb" class="js-toggler" type="checkbox" value="categoryb"><label for="filter-categoryb">Category B</label><br><input id="filter-categoryc" class="js-toggler" type="checkbox" value="categoryc"><label for="filter-categoryc">Category C</label><br><input id="filter-categoryd" class="js-toggler" type="checkbox" value="categoryd"><label for="filter-categoryd">Category D</label><br><input id="filter-categorye" class="js-toggler" type="checkbox" value="categorye"><label for="filter-categorye">Category E</label><br><input id="filter-categoryf" class="js-toggler" type="checkbox" value="categoryf"><label for="filter-categoryf">Category F</label><br><input id="filter-categoryg" class="js-toggler" type="checkbox" value="categoryg"><label for="filter-categoryg">Category G</label><br><input id="filter-categoryh" class="js-toggler" type="checkbox" value="categoryh"><label for="filter-categoryh">Category H</label><br><input id="filter-categoryi" class="js-toggler" type="checkbox" value="categoryi"><label for="filter-categoryi">Category I</label><div class="categorya">A</div><div class="categoryb">B</div><div class="categoryc">C</div><div class="categoryd">D</div><div class="categorye">E</div><div class="categoryf">F</div><div class="categoryg">G</div><div class="categoryh">H</div><div class="categoryi">I</div> <p class="info">- If you select 1-3 boxes = show first image. If you select 4-6 = second image. If you select 7-9 = third image. If you select all of them = fourth image.</p><br>
<h1>Images:</h1>
<div>  <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[]" src="http://dummyimage.com/600x400/000/fff&text=First+image">  <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[1]" src="http://dummyimage.com/600x400/000/fff&text=Second+image">  <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[2]" src="http://dummyimage.com/600x400/000/fff&text=Third+image">  <img alt="Sample Image" class="js-toggle-image" data-show-for-checkboxes="[1,2]" src="http://dummyimage.com/600x400/000/fff&text=Fourth+image"></div>

Jquery Use Image As CheckBox

Here is the solution of your question. I hope this will help you.

CSS

.checked {border:solid 2px red}

HTML Code

<form id="form1">
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
    <input type="checkbox" id="imgCheck" name="imgCheck" value="barney" />
    <input type="submit" value="Submit" />
</form>

jQuery Code

$(document).ready(function() {

    $('#blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('#imgCheck').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('#imgCheck').prop('checked', false);
        }
    })

});

Working Example : Demo

How can I display the checkbox over the images for selection?

This can be done with pure CSS, assuming you have fixed width and height for all images. The trick is setting absolute position for the checkbox then assign bottom and right to zero.

HTML sample:

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

As for click events, just apply click handler to each checkbox and it will work just fine.. see in this updated fiddle.

How to Tick a checkbox on Clicking an image

Added float: left; to your .custom-checkbox span CSS rule, added a br tag and modified your HTML a bit.

.custom-checkbox input {  display: none;}
.custom-checkbox span {  border: 2px solid #7e8a94;  /* float: right; - you don't need that. Use float: left; */  float: left;  height: 20px;  width: 20px;  border-radius: 5px;  cursor: pointer;  display: flex;  justify-content: center;  align-items: center;}
.custom-checkbox:hover span,.custom-checkbox input:checked+span {  border: 3px solid #43D8B0;}
.custom-checkbox input:checked+span:before {  content: "✔";}

<label class="custom-checkbox"> <input type="checkbox">  <span></span>     <br>  <br> <img class="img" src="http://i63.tinypic.com/2rrqs1l.png"/></label>

Use Images Like Checkboxes