<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Checkbox badge</h2> <hr class="mb-3"> <div class="form-group"> <label for="check_php" class="btn btn-sm btn-outline-info rounded-pill"><input type="checkbox" id="check_php" class="checkbadge" data-color="info">PHP</label> <label for="check_symfony" class="btn btn-sm btn-outline-primary rounded-pill"><input type="checkbox" id="check_symfony" class="checkbadge" data-color="primary">Symfony</label> <label for="check_laravel" class="btn btn-sm btn-outline-primary rounded-pill"><input type="checkbox" id="check_laravel" class="checkbadge" data-color="primary">Laravel</label> <label for="check_html" class="btn btn-sm btn-outline-primary rounded-pill"><input type="checkbox" id="check_html" class="checkbadge" data-color="primary">HTML</label> </div> </div> </div>

.checkbadge{ display: none; }

$(document).ready(function () { $('.checkbadge').on('click', function(){ let $parent = $(this).parent(); let $color = $(this).attr('data-color'); if($parent.hasClass('btn-outline-'+$color)) { $parentremoveClass('btn-outline-'+$color).addClass('btn-'+$color); } else { $parentremoveClass('btn-'+$color).addClass('btn-outline-'+$color); } }); });