<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="signupbox" style=" margin-top:50px" class="mainbox col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="panel-title">Cochez les 3 magasins que vous utilisez souvent </div> </div> <div class="panel-body" > <form id="signupform" class="form-horizontal" role="form"> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group-inline"> <div class="col-xs-12 col-sm-6 col-md-3" style="padding-top:25px;"> <label class="btn btn-primary"> <img src="http://placehold.it/160x100" alt="..." class="img-thumbnail img-check"> <input type="checkbox" name="chk1" id="item4" value="val1" class="hidden" autocomplete="off"> </label> </div> </div> <div class="form-group"> <!-- Button --> <div class="col-md-offset-0 col-md-12" style="padding-top:25px;"> <button id="btn-signup" type="button" class="btn btn-info col-md-12"><i class="icon-hand-right"></i> &nbsp Envoyer</button> </div> </div> </form> </div> </div> </div> </div>

.check { opacity:0.5; color:#996; }

$(document).ready(function(e){ $(".img-check").click(function(){ $(this).toggleClass("check"); }); });