JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="t1" value="abc" /><br />
<input type="checkbox" id="cb1" />1<br />
<input type="checkbox" id="cb2" checked="checked" />2<br />
<input type="button" id="b1" value="read" />
<input type="button" id="b2" value="writeAttr" />
<input type="button" id="b3" value="writeProp" />
<div></div>

JavaScript

var d = $('div'),
    t1 = $('#t1'),
    cb1 = $('#cb1'),
    cb2 = $('#cb2');
$('#b1').click(function() {
    var s = '';
    s += 't1.attr: ' + t1.attr('value') +
        '; .prop: ' + t1.prop('value') + '<br />';
    s += 'cb1.attr: ' + cb1.attr('checked') + 
        '; .prop: ' + cb1.prop('checked') + '<br />';
    s += 'cb2.attr: ' + cb2.attr('checked') + 
        '; .prop: ' + cb2.prop('checked') + '<br />';
    d.html(s);
});
$('#b2').toggle(function() {
    t1.attr('value', 'test1');
    cb1.attr('checked', 'checked');
    cb2.removeAttr('checked');
}, function() {
    t1.val('test2');
    cb1.attr('checked', false);
    cb2.attr('checked', true);
});
$('#b3').toggle(function() {
    t1.prop('value', 'test1');
    cb1.prop('checked', true);
    cb2.removeProp('checked');
}, function() {
    t1.prop('test2');
    cb1.prop('checked', false);
    cb2.prop('checked', true);
});