"Image Checkbox Buttons"
Bootstrap 3.0.3 Snippet by mi-dexigner

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br />
<div class="container">
<div class="row">
<div class="col-sm-8">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12 border-box-black">
<img src="http://placehold.it/160x100" class="img-responsive img-radio">
<div class="btm-space-10">$21.43/mo <input type="checkbox" class="pack_item pull-right"/></div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 border-box-black">
<img src="http://placehold.it/160x100" class="img-responsive img-radio">
<div class="btm-space-10">$21.43/mo <input type="checkbox" class="pack_item pull-right"/></div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 border-box-black">
<img src="http://placehold.it/160x100" class="img-responsive img-radio">
<div class="btm-space-10">$21.43/mo <input type="checkbox" class="pack_item pull-right"/></div>
</div>
</div>
<div class="col-sm-3">
<div class="col-sm-12 border-box-black">
<img src="http://placehold.it/160x100" class="img-responsive img-radio">
<div class="btm-space-10">$21.43/mo <input type="checkbox" class="pack_item pull-right"/></div>
</div>
</div>
<div class="col-sm-3 space-20">
<div class="col-sm-12 border-box-black">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.btn-radio {
width: 100%;
}
.img-radio {
opacity: 0.5;
margin-top: 15px;
margin-bottom: 5px;
}
.border-box-blue {
border: 1px solid #5FB0E4;
}
.border-box-black {
border: 1px solid #000000;
}
.space-20 {
margin-top: 20px;
}
.btm-space-10{
margin-bottom: 5px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function () {
$('input.pack_item').click(function(e) {
if(this.checked){
$(this).parent().parent().addClass("border-box-blue");
$(this).parent().parent().removeClass("border-box-black");
$(this).siblings('.img-radio').css('opacity','1.0');
}else {
$(this).parent().parent().addClass("border-box-black");
$(this).parent().parent().removeClass("border-box-blue");
$(this).siblings('.img-radio').css('opacity','0.5');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO
Image Crop jQuery
Funky Radio/Checkbox Buttons V2.0

Questions / Comments: