JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" checked="checked" />
<div class="log"></div>
<div class="log2"></div>
<div class="log3"></div>
<div class="log4"></div>
<div class="log-live"></div>

JavaScript

$('.log').text(
    'Attr: ' + $('input').attr('checked') + '\n' +
    'Prop: ' + $('input').prop('checked') + '\n'
);
$('input').prop('checked', false);
$('.log2').text(
    'Attr: ' + $('input').attr('checked') + '\n' +
    'Prop: ' + $('input').prop('checked') + '\n'
);
$('input').removeAttr('checked');
$('.log3').text(
    'Attr: ' + $('input').attr('checked') + '\n' +
    'Prop: ' + $('input').prop('checked') + '\n'
);
$('input').attr('checked', 'checked');
$('.log4').text(
    'Attr: ' + $('input').attr('checked') + '\n' +
    'Prop: ' + $('input').prop('checked') + '\n'
);
$('input').change(function(e) {
    $('.log-live').text(
        'Attr: ' + $('input').attr('checked') + '\n' +
        'Prop: ' + $('input').prop('checked') + '\n'
    );
});