0
I’m setting up a screen to choose some options. Actually, it’s a lot of checkboxes with style. Here I even took the class that makes the style of the checkbox, to make visible. I can give the effect by clicking on the image, but the script does not mark the checkbox. It would be possible to mark the checkbox when I click on the image?
Follow what I’ve done so far.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check</title>
<style type="text/css">
.img-check{
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.img-check:hover{
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-transition-duration: .1s;
transition-duration: .1s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
box-shadow: 0 14px 42px 0 rgba(0,0,0,.2);
text-decoration: none;
cursor: pointer;
}
.check::before{
content: '';
position: absolute;
top: 0;
bottom: 0px;
left: 0;
right: 0;
border: 5px solid #2f9780 !important;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
z-index: 1;
}
.check:after{
box-sizing: border-box;
content: '';
display: block;
position: absolute;
bottom: 5px;
right: 10px;
width: 52px;
height: 53px;
background-image: url(http://www.hostmove.com.br/images/check.png);
background-repeat: no-repeat;
background-size: 100%;
}
.mediabox_media-frame {
position: relative;
margin-bottom: 30px;
}
</style>
<!-- Jquery -->
<script type="text/javascript" src="https://www.agenciamove.com.br/js/jquery-1.11.2.min.js"></script>
<!-- Boostrap -->
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$(".img-check").click(function(){
$(this).toggleClass("check");
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<form method="get">
<div class="form-group">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/1.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val1" class="" autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/2.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val2" class="" autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/3.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val3" class="" autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/4.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val4" class="" autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/5.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val5" class="" autocomplete="off">
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="mediabox_media-frame">
<div class="img-check">
<img src="http://www.hostmove.com.br/images/6.jpg" alt="..." class="img-responsive center-block">
<input type="checkbox" name="chk1" id="item4" value="val6" class="" autocomplete="off">
</div>
</div>
</div>
</div>
<!-- <input type="submit" value="Check Item" class="btn btn-success"> -->
</form>
</div>
</div>
</body>
</html>