JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<button id="btn" onclick="toggleA()">Toggle A</button>&nbsp;
<button id="btn" onclick="toggleB()">Toggle B</button>&nbsp;
<button id="btn" onclick="toggleJQ()">Toggle JQ</button>
<br><br>
<button id="btn" onclick="setC(true)">Check C</button>
<button id="btn" onclick="setC(false)">Unheck C</button>
<br><br>
<label>
    <input id="check-a" onchange="alert('Changed A!')" type="checkbox"> A
</label>
    <br><br>
<label>
    <input id="check-b" onchange="alert('Changed B!')" type="checkbox"> B
</label>
    <br><br>
<label>
    <input id="check-jq" onchange="alert('Changed JQ!')" type="checkbox"> JQ
</label>
    <br><br>
<label>
    <input id="check-c" onchange="alert('Changed C!')" type="checkbox"> C
</label>

JavaScript

function toggleA() {



document.getElementById('btn-fullstory').addEventListener('click', function () {
  document.getElementById("switch").checked = true;
});


}

function toggleB() {
    var elm = document.getElementById('check-b');
    elm.click();
}

function toggleJQ() {
    var elm = $('#check-jq');
    elm.prop('checked', !elm.prop('checked'));
    // Use .click() instead
}

function setC(checked) {
    var elm = document.getElementById('check-c');
    if (checked != elm.checked) {
        elm.click();
    }
}