JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group" data-toggle="buttons">
    <label id="label1" class="btn btn-primary active">
        <input type="checkbox" autocomplete="off" checked>Checkbox 1 (pre-checked)</input>
    </label>
    <label id="label2" class="btn btn-primary">
        <input type="checkbox" autocomplete="off">Checkbox 2</input>
    </label>
    <label id="label3" class="btn btn-primary">
        <input type="checkbox" autocomplete="off">Checkbox 3</input>
    </label>
</div>
<div id="output_header"></div>
<br/>
<div id="output_body">State of #label2 AFTER button click ==</div>
<br/>
<div id="actionExample">Action</div>

JavaScript

$('#output_header').text("Initial state of #label2 (does it have the 'active' class) == " + $('#label2').hasClass('active'));

$('label > input[type=checkbox]').on('change', function () {
    console.log($(this).is(':checked'));
})