jquery radioボタン clear時にvalueまで消える

2019.10.26
jquery
jquery

formのリセットボタンを作成したが、radioボタンの値がpostされないという修正依頼があった際の修正メモ

1. ソースコード

ソースコード

$(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").prop("checked", true);
    }
});

$(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").prop("checked", true);

}

});

changeイベントで、デバックしてみると、radio属性のvalueが消えてしまっていたので下記に修正

## .not(":button, :submit, :reset, :hidden")に, :radioを追加
## 調べてみるとcheckboxも同様の事象だったので、ついでに修正
$(function () {

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

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