jQueryでページロードのタイミングでラジオボタンの判定をしたい

Question

###前提・実現したいこと
下記はラジオボタンにチェックが入るとインジケータを点灯させるjQueryコードです。
このコードはクリックでインジケーターを点灯させることができますが、最初から checked になっているラジオボタンの状態をページロードのタイミングで取得できません。
最初から checked になっているラジオボタンの状態を取得するにはどのように修正すれば良いでしょうか？
サンプル：JSFiddle

###該当のソースコード

<input type="radio" name="c1" value="1" data-target="#i1" checked>
<input type="radio" name="c1" value="2" data-target="#i1">
<input type="radio" name="c1" value="3" data-target="#i1">
<input type="radio" name="c1" value="4" data-target="対象外">

<div id="i1">indicator</div>

div.selected{background-Color:red;}

var $radio = $('input[type="radio"][data-target^="#i"]');
  $radio.on("change", function () {
    $($(this).data('target')).toggleClass('selected', this.checked);
}).trigger('change');

Answer 1

これは、#i*を前から順番にチェックして
最初にselectedをつけたあと次の2で消しているわけです

こうするとよいでしょう

$(function(){
  $('input[type="radio"][data-target^="#i"]').on("change", function () {
    $($(this).data('target')).toggleClass('selected', $(this).prop('checked'));
  }).filter(':checked').trigger('change');
});

Comments

[hibikikudo]

ありがとうございます。大変参考になります。