Bootstrap + JQuery - How to create a checkbox button

<div class="container p-4"> <span class="button-checkbox"> <button type="button" class="btn btn-sm btn-outline-primary" data-color="primary">Example</button> <input type="checkbox" class="d-none"/> </span> </div> 

$('.button-checkbox').each(function () { var $button = $(this).find('button'), $checkbox = $(this).find('input:checkbox'), color = $button.data('color'); $button.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')).triggerHandler('change'); initialize(); }); $checkbox.on('click', function () { initialize(); }); function initialize() { var tab = $button.parents('.tab-pane').attr('id'), parentButton = $('#' + tab + '-tab'), checkBoxCount = $button.parents('.content').find('input[type="checkbox"]').filter(':checked').length, isChecked = $checkbox.is(':checked'); $button.data('state', isChecked ? 'on' : 'off'); parentButton.children('span').remove(); if (checkBoxCount) { parentButton.append('<span class="badge badge-primary ml-auto float-right d-flex align-items-center shadow-sm">' + checkBoxCount + '</span>'); } if (isChecked) { $button.append('<i class="fas fa-check ml-1"></i>'); return $button.removeClass('btn-outline-primary').addClass('bg-' + color + ' shadow-sm text-white'); } $button.children('i').remove(); return $button.removeClass('bg-' + color + ' active text-white').addClass('btn-outline-primary'); } });