34540


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

[code]

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

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

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


CC BY-SA 3.0
2017-05-08T00:36:29.550
34531
2017-05-08T06:17:49.987
23004
question
javascript jquery
jQueryでページ読み込み時に〜を含む名前のラジオボタンの状態を見て表示する内容を変えたい


まず結論から述べると

[code]

    $( 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();
        }
    })
    
[/code]

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

以下が解説です。

[code]

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

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

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

読み込み時に起動してほしい処理を書く場合はreadyAPIが使えます  
[ready](http://api.jquery.com/ready/ ".ready\(\) | jQuery API Documentation")

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

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


CC BY-SA 3.0
2017-05-08T05:17:33.537
34540
2017-05-08T05:17:33.537
22665
34531
answer


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

[code]

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


CC BY-SA 3.0
2017-05-08T05:40:48.433
34541
2017-05-08T06:17:49.987
2017-05-08T06:17:49.987
76
23011
34531
answer