Untitled

<html>
    <head>
        <title>
        </title>
    <link rel="stylesheet" href="css/cece.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
    <form action="#" method="post">
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <label class="image-checkbox">
                    <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
                    <input type="checkbox" name="artikel1" value="" />
                    <i class="fa fa-check hidden"></i>
                </label>
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <label class="image-checkbox">
                    <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
                    <input type="checkbox" name="artikel2" value="" />
                    <i class="fa fa-check hidden"></i>
                </label>
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            </div>
        </div>
        <div>
            <div class="col-xs-4 col-sm-3 col-md-2 text-center">
                <img class="img-responsive" src="https://dummyimage.com/282x188/000/fff" />
            </div>
        </div>
          <input type="submit" class="btn btn-success" value="Submit Button">
    </form>
    </body>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="js/checkboxes.js?t=<?php time(); ?>"></script>
</html>

.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.image-checkbox {
  position: relative;
  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;
  display: block;
}
.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;
}

jQuery(function ($) {
        // init the state from the input
        $(".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) {
            if ($(this).hasClass('image-checkbox-checked')) {
                $(this).removeClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().removeAttr("checked");
            }
            else {
                $(this).addClass('image-checkbox-checked');
                $(this).find('input[type="checkbox"]').first().attr("checked", "checked");
            }

            e.preventDefault();
        });
    });