JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post">
    <input type="checkbox" id="foo" checked="checked"> Check/uncheck
    <input type="reset" id="reset" value="Reset">
    <input type="submit" value="Submit">
</form>

<br>
<table border="1">
    <tr>
        <td>checked</td>
        <td id="ch"></td>
    </tr>
    <tr>
        <td>defaultChecked</td>
        <td id="dc"></td>
    </tr>
    <tr>
        <td>getAttribute("checked")</td>
        <td id="ga"></td>
    </tr>
</table>

JavaScript

var checkBox = document.getElementById("foo");

function updateTable() {
    window.setTimeout(function() {
        document.getElementById("dc").innerHTML = checkBox.defaultChecked;
        document.getElementById("ga").innerHTML = checkBox.getAttribute("checked");
        document.getElementById("ch").innerHTML = checkBox.checked;
    }, 1);
}

checkBox.onmouseup = updateTable;
document.getElementById("reset").onmouseup = updateTable;
updateTable();