JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

check1 <input type="checkbox" id="check1" checked="checked">
check2 <input type="checkbox" id="check2" checked="checked">
check3 <input type="checkbox" id="check3" checked>
check4 <input type="checkbox" id="check4" checked>
check5 <input type="checkbox" id="check5">
check6 <input type="checkbox" id="check6">

JavaScript

// #4658

$("#check2, #check4").attr("checked", false);
// uncomment this line to see other strange behavior
//$("#check2, #check4").removeAttr("checked");
$("#check5").attr("checked", true);
var $sel = $("input[type=checkbox][checked]");
$("body").prepend(
    "<p>There are supposedly "+ $sel.length + " boxes checked</p>"
);
$sel.css({border: "1px solid #c00"});
$("input[type=checkbox]").each(function(){
    $(this).after(
        "   "+$(this).attr("checked")+
        " , "+this.checked+
        " , "+this.getAttribute("checked")+
        " , "+($sel.index(this)<0? "notinset" : "inset")+
        "  ("+typeof(this.getAttribute("checked"))+")"+
        "<br>"
    );
});