title: Bootstrap image with checkbox
body: <p>I've got a little problem, I'm trying to have a simple image which you can click on and it will be checked or unchecked.</p>
  
  <p>I found some bootstrap code online and tried it out on my project. Sadly, the code doesn't seem to work like it's suppose to on my localhost.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"&gt;
  &lt;div class="container"&gt;
    &lt;h3&gt;Bootstrap image checkbox(multiple)&lt;/h3&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"&gt;
      &lt;label class="image-checkbox"&gt;
        &lt;img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /&gt;
        &lt;input type="checkbox" name="image[]" value="" /&gt;
        &lt;i class="fa fa-check hidden"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"&gt;
      &lt;label class="image-checkbox"&gt;
        &lt;img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /&gt;
        &lt;input type="checkbox" name="image[]" value="" /&gt;
        &lt;i class="fa fa-check hidden"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"&gt;
      &lt;label class="image-checkbox"&gt;
        &lt;img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /&gt;
        &lt;input type="checkbox" name="image[]" value="" /&gt;
        &lt;i class="fa fa-check hidden"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"&gt;
      &lt;label class="image-checkbox"&gt;
        &lt;img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /&gt;
        &lt;input type="checkbox" name="image[]" value="" /&gt;
        &lt;i class="fa fa-check hidden"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="col-xs-4 col-sm-3 col-md-2 nopad text-center"&gt;
      &lt;label class="image-checkbox"&gt;
        &lt;img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" /&gt;
        &lt;input type="checkbox" name="image[]" value="" /&gt;
        &lt;i class="fa fa-check hidden"&gt;&lt;/i&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nopad {
      padding-left: 0 !important;
      padding-right: 0 !important;
  }
  /*image gallery*/
  .image-checkbox {
      cursor: pointer;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      border: 4px solid transparent;
      margin-bottom: 0;
      outline: 0;
  }
  .image-checkbox input[type="checkbox"] {
      display: none;
  }
  
  .image-checkbox-checked {
      border-color: #4783B0;
  }
  .image-checkbox .fa {
    position: absolute;
    color: #4A79A3;
    background-color: #fff;
    padding: 10px;
    top: 0;
    right: 0;
  }
  .image-checkbox-checked .fa {
    display: block !important;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(".image-checkbox").each(function () {
    if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
      $(this).addClass('image-checkbox-checked');
    }
    else {
      $(this).removeClass('image-checkbox-checked');
    }
  });
  
  // sync the state to the input
  $(".image-checkbox").on("click", function (e) {
    $(this).toggleClass('image-checkbox-checked');
    var $checkbox = $(this).find('input[type="checkbox"]');
    $checkbox.prop("checked",!$checkbox.prop("checked"))
  
    e.preventDefault();
  });
  </code></pre>
  
  <p>How it is suppose to look: <a href="https://codepen.io/kosukehorai/pen/pRwKjg" rel="nofollow noreferrer">codepen</a></p>
  
  <p>My results: <a href="https://jsfiddle.net/ffmtxkk2/" rel="nofollow noreferrer">results</a></p>
  
  <p>As you can see the checkbox isn't working and the positions are off.</p>
  
  <p>I'm a beginner and I apologize for any confusion given.</p>
  
  <p>Is there something that I'm doing wrong?</p>