JSFiddle - React, Tailwind, and code Playground

by xixonia

HTML

<h1>jQuery 1.6 Problem</h1>
<p>
    In Chrome, Firefox, and Internet Explorer (at least), you will notice that using the "checked" attribute to change a checkbox is inadiquate. Please see the example below:
</p>
<h1>Instructions</h1>
<ol>
    <li>Click the "Attribute" buttons, and see the checkbox change.</li>
    <li>Click the checkbox, and see the checkbox change.</li>
    <li>Click the "Attribute" buttons again, and see the checkbox remain the same</li>
    <li>Click the "Property "buttons, and see the checkbox change.</li>
</ol>

<input type="checkbox" />
<div>
    <button id="attrTrue">Attribute True</button>
    <button id="attrFalse">Attribute False</button>
</div>
<div>
    <button id="propTrue">Property True</button>
    <button id="propFalse">Property False</button>
</div>

CSS

div
{
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
}

p, ol
{
    margin: 10px;
}

li
{
    margin-left: 10px;
}

button
{
    padding: 5px;
    width: 120px;
    text-align: left;
}

input[type=checkbox]
{
    margin: 10px;
}

JavaScript

$(function() {
    
    // Use the "checked" attribute
    $('#attrTrue').click(function() {
        $(':checkbox').attr('checked', true);
    });
    
    $('#attrFalse').click(function() {
        $(':checkbox').attr('checked', false);
    });
    
    // Use the "checked" property of the dom element
    $('#propTrue').click(function() {
        $(':checkbox').each(function() { this.checked = true; });
    });
    
    $('#propFalse').click(function() {
        $(':checkbox').each(function(){ this.checked = false; });
    });
    
});