JSFiddle - React, Tailwind, and code Playground

by mmuelle4

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'));

$('#label2').on('click', function(){
    var newState = $('#label2').hasClass('active');
    $('#output_body').text("State of #label2 AFTER button click == "+newState);
    //I have to invert the logic for my actions
    
    if (newState == true){ //the button is about to be inactive
        console.log("Do things for inactive state");
        $('#actionExample').text("Action: now I'm inactive! (even though I had to do an equality check for 'newState == true')");
    } else if (newState == false){
        console.log("Do things for active state");
        $('#actionExample').text("Action: now I'm active! (even though I had to do an equality check for 'newState == false')");
    }
})