<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"> <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"> <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"> <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"> <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> </form> </div> </div> </div>

.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; }

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