jQuery フォームクリアボタンを作る。

背景

検索条件の多い検索フォームでは入力内容をクリアしたいという要望がよくあります。
HTMLのresetでは初期値に戻るため、検索条件をクリアできない...！

目的

クリアボタン押下でフォームの値をクリアする(初期値に戻すのではない)

• input, select, textareaがクリア対象。
• button, submit, reset, hiddenはクリア対象外。
• ラジオボタンは任意の値を初期値に設定する。

実装

HTML

<form action="#" method="POST">
    <input name="email" class="input" type="email" value="[e-mail]">
    <input name="name" class="input" type="text" value="奥 華子">
    <input name="password" class="input" type="password" value="">
    <input name="age" class="input" type="number" value="40">
    <div>
        <input name="sex" type="radio" value="0" data-default> 指定しない
        <input name="sex" type="radio" value="1"> 男
        <input name="sex" type="radio" value="2" checked> 女
    </div>
    <div>
        <input name="sweets" type="radio" value="1"> きのこの山
        <input name="sweets" type="radio" value="2" checked> たけのこの里
    </div>
    <div>
        <label class="checkbox">
            <input name="hobby[]" type="checkbox" checked> 音楽
        </label>
        <label class="checkbox">
            <input name="hobby[]" type="checkbox"> 映画鑑賞
        </label>
        <label class="checkbox">
            <input name="hobby[]" type="checkbox"> 読書
        </label>
    </div>
    <div>
        <select name="prefecture">
            <option value="">選択してください</option>
            <option value="1">北海道</option>
            <option value="12" selected>千葉県</option>
            <option value="47">沖縄県</option>
        </select>
    </div>
    <textarea name="message" class="textarea"></textarea>
    <input name="hidden" type="hidden" value="この要素はクリアされないよ！">

    <div>
        <button name="action" value="send" type="submit">送信</button>
        <button name="action" value="clear" type="button" class="clear-button">クリア</button>
    </div>
</form>

JavaScript

"use strict";

$(function () {
    $(".clear-button").on("click", function () {
        clearForm(this.form);
    });

    function clearForm (form) {
        $(form)
            .find("input, select, textarea")
            .not(":button, :submit, :reset, :hidden")
            .val("")
            .prop("checked", false)
            .prop("selected", false)
        ;

        $(form).find(":radio").filter("[data-default]").prop("checked", true);
    }
});

デモサイト

ソースコード

補足

data-default のdata属性の付いたラジオボタンはクリアボタン押下時に選択されるようにしています。