<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-md-3 text-xs-center"> <label class="image-checkbox" title="England"> <img src="http://www.prepbootstrap.com/Content/images/template/gamesschedule/england.jpg" /> <input type="checkbox" name="team[]" value="england" checked="checked" /> </label> </div> <div class="col-md-3 text-xs-center"> <label class="image-checkbox" title="Germany"> <img src="http://www.prepbootstrap.com/Content/images/template/gamesschedule/germany.jpg" /> <input type="checkbox" name="team[]" value="germany" /> </label> </div> <div class="col-md-3 text-xs-center"> <label class="image-checkbox" title="Italy"> <img src="http://www.prepbootstrap.com/Content/images/template/gamesschedule/italy.jpg" /> <input type="checkbox" name="team[]" value="italy" /> </label> </div> <div class="col-md-3 text-xs-center"> <label class="image-checkbox" title="Spain"> <img src="http://www.prepbootstrap.com/Content/images/template/gamesschedule/spain.jpg" /> <input type="checkbox" name="team[]" value="spain" /> </label> </div> </div>

.image-checkbox { cursor: pointer; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 4px solid transparent; outline: 0; } .image-checkbox input[type="checkbox"] { display: none; } .image-checkbox-checked { border-color: #f58723; }

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(); }); });