JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <button type="button" class="form-clear">Clear</button>
    <button type="button" class="form-set">Set</button>
    <input type="text" value="Preset value" />
    <input type="checkbox" checked/>
    <input type="checkbox" />
</form>
    
<ol>
    <li>Click <b>Set</b> first. This will input "New preset value" and check the second checkbox.</li>
    <li>Click <b>Clear</b> to clear the whole form.</li>
    <li>Click <b>Set</b> again. This will input "New preset value" <b>but will not</b> check the second checkbox.</li>
</ol>

JavaScript

$(".form-clear").click(function(){
    $(':input').not(':button, :submit, :reset, :hidden').val('');
    $(':checkbox, :radio').attr('checked', false);
});
$(".form-set").click(function(){
    $(':input').not(':button, :submit, :reset, :hidden').val('New preset value');
    $(':checkbox, :radio').attr('checked', true);
});