NEW ARTICLE
Vue Router: Cannot redirect to replaced routeの解決方法
  1. HOME
  2. jquery
  3. jquery radioボタン clear時にvalueまで消える

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

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

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

目次

ソースコード

$(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);
    }
});