<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 class="row"> <div class="col-md-3 text-center"> Item 1<br> <button class="btn btn-primary btn-xs item-btn" type="button" id="btn-nanodrop">Add to list</button> <input type="checkbox" class="item-checkbox" name="Item1" value="TRUE"> </div> <div class="col-md-3 text-center"> Item 2<br> <button class="btn btn-primary btn-xs item-btn" type="button" id="btn-nanodrop">Add to list</button> <input type="checkbox" class="item-checkbox" name="Item2" value="TRUE"> </div> </div> </div>

.item-checkbox{ /*display: none; */ }

$(".item-btn").click(function(){ if($(this).hasClass("btn-success")){ $(this).removeClass('btn-success') .next('.item-checkbox').prop('checked',false); } else{ $(this).addClass('btn-success') .next('.item-checkbox').prop('checked',true); } //$('.add-to-list').not(this).removeClass('active'); });