JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div>
        <input type='text' value='Default value' style='width:200px'/>
        <button type='button'>Reset</button>
    </div>

    <div>
        <input type='checkbox' name='checkbox' value='1'/> #1
        <input type='checkbox' name='checkbox' value='2' checked/> #2
        <input type='checkbox' name='checkbox' value='3' /> #3
        <button type='button' style='margin-left:78px'>Reset</button>
    </div>

    <div>
        <select style='width:206px'>
            <option value='1'>1</option>
            <option value='2' selected>2</option>
            <option value='3'>3</option>
        </select>
        <button type='button'>Reset</button>
    </div>

    <div>
        <select multiple style='width:206px'>
            <option value='1'>1</option>
            <option value='2' selected>2</option>
            <option value='3'>3</option>
        </select>
        <button type='button'>Reset</button>
    </div>
</form>

CSS

div {
    margin-top:20px;
    margin-left: 20px;
}

JavaScript

function resetForm() {
    var thiz = $(this), input = thiz.closest("div").find(":input:not(button)");
    if(input.is("select")) {
    	var values = [];
        var options = input.find("option");
    	for(var index = 0; index < options.size(); index++) {
        	if(options[index].defaultSelected) {
            	values.push($(options[index]).val())
            }
        }
        input.val(values);
    }
    else if(input[0].type == 'checkbox') {
    	for(var index = 0; index < input.size(); index++) {
        	if(input[index].defaultChecked) {
            	$(input[index]).prop("checked", "checked");
            }
            else {
            	$(input[index]).prop("checked", null);
            }
        }
    }
    else {
    	input.val(input[0].defaultValue)
    }
}



$("button").bind("click", resetForm);