JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
    <div id="page">
        Checkbox: <input type="checkbox" id="checkbox1">
    </div>
</form>
<button class="run">Run jQuery 1.6 code</button> <button class="clear">Reset</button>

<div id="run">
    $("input[type=checkbox]").attr("checked"); //undefined<br><br>
    $("input[type=checkbox]").prop("checked"); //false<br><br>
    $("input[type=checkbox]").attr("checked", true); //creates the checked attribute on the element and set it to true.<br><br>
    $("input[type=checkbox]").prop("checked"); //true<br><br>
    $("input[type=checkbox]").prop("checked", false); //sets the property only.
    
</div>

<script src="https://getfirebug.com/firebug-lite.js#startOpened"></script>

CSS

* { font-family: arial, helvetica, sans-serif; }
#run {
 display: none;   
}

JavaScript

$(function() {
    checkbox = $("input[type=checkbox]");

    $("button.run").bind("click", function() {
        var c = checkbox;
        console.log(c.attr("checked"));
        console.log(c.prop("checked"));
        console.log('$("input[type=checkbox]").attr("checked", true)');
        c.attr("checked", true);
        console.log(c.prop("checked"));
        console.log('$("input[type=checkbox]").prop("checked", false)');
        c.prop("checked", false);
        $("#run").fadeIn();
    });
    
    $("button.clear").bind("click", function() {
        checkbox.attr("checked", false);
        console.clear(); 
        $("#run").fadeOut();
    });
});