0

scheduleというフォームがn個あります。その中にあるnameが[kind]で終わるラジオボタンが変更された時、その選択状態と値の内容によって表示するinput要素を制御しています。
ラジオボタンが選択された時にはこのコードで動くのですが、読み込み時に選択されているラジオボタンの値を見て同じように動くようにするにはどうすればよいでしょうか?

$(document).on('change',"input:radio[name$='[kind]']", function(){
    var kind = $(this);
    if ($(kind).is(":checked") != null) {
        $(kind).next('.schedule-date').show();
    }
})

類似の状況での回答で.trigger('change')を後ろにつければというのがありましたが、これはうまくいきませんでした。

他にも色々試したのですが、うまくいかないのでお知恵を借りられればと思います。よろしくお願いいたします。

2 件の回答 2

0

まず結論から述べると

$( document ).ready(function(){
    $("input:radio[name$='[kind]']").each(function(){
        var kind = $(this);
        if ($(kind).is(":checked") != null) {
            $(kind).next('.schedule-date').show();
        }
    });
});
$(document).on('change',"input:radio[name$='[kind]']", function(){
    var kind = $(this);
    if ($(kind).is(":checked") != null) {
        $(kind).next('.schedule-date').show();
    }
})

上記のように記述すれば実行したい形になると思います。
※実行テストはしていませんのでご注意ください

以下が解説です。

$(document).on('change',"input:radio[name$='[kind]']", function(){
  //中略
});

記載のjQueryAPIを読み解くと、
documentのソース内のinput:radio[name$='[kind]']のDOMに対してchangeイベントが発生した場合に
function(){}の関数内を実行するというAPIになっています。

つまりchangeが発生しないと実行しません。
ページの読み込み時はchangeのイベントは発生しませんので別途処理を記述する必要があります。

読み込み時に起動してほしい処理を書く場合はreadyAPIが使えます
ready

あとは対象DOMを走査処理が必要ですのでeachを使って対象のDOMを一気に処理します。

細かくいうとチェーンメソッドで繋いだり、共通箇所は関数やメソッド化するなどリファクタリングが必要ですが今回はここまで理解してもらえれば問題ないと思います

-1

読み込み後に対象のラジオボタンのチェンジイベントを発火させてはいかがでしょうか。

$(function(){
        $("input:radio[name$='kind']").change();
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。