jQueryラジオボタンの状態判定で.toggleClassがうまく動かない

Question

###前提・実現したいこと
下記はラジオボタンにチェックが入るとインジケータを点灯させるjQueryコードです。

このコードはクリックまたはページロードでラジオボタンの状態を取得し、インジケータを点灯させます。
ところが、チェックが外れた時にインジケータ消えてくれません。toggleClassがうまく働いていないのでしょうか？
チェックが外れた時にはインジケータを消すにはどうすればいいでしょうか？

サンプル：JSFiddle

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

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

<div id="i1">i1</div>
<div id="i2">i2</div>
<div id="i3">i3</div>

div.selected{background-Color:red;}

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

Answer 1

こうですかね

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

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

<div id="i1">i1</div>
<div id="i2">i2</div>
<div id="i3">i3</div>
<div id="j4" class="selected">対象外</div>

selectedを消す処理はidの名称よりclassでグルーピングしたほうがわかりやすいかもしれません

Answer 2

yambejpさんのコードでいいと思いますが、無理にtoggleClassを使うならこうでしょうか。

  $('input[type="radio"][name="c1"]').on('change', function () {
    $('input[type="radio"][data-target^="#i"]').each(function(index, element) {
      $($(element).attr('data-target')).toggleClass('selected', element.checked);
    });
  }).filter(':checked').trigger('change');

Answer 3

$('[name=c1]').on("change", function () {
     $(".selected").removeClass("selected");
     $($(this).data('target')).toggleClass('selected');
  }).filter(':checked').trigger('change');

これで想定している動きになると思います。
toggleClassは「～される度」にクラスを付けたり消したりするので、

 $($(this).data('target')).toggleClass('selected');

だけだと、クラスが付いたままになってしまいます。なので最初にselectedがついているクラスからselectedを消すようにしています。

Answer 4

.filter(':checked').trigger('change'); このコードはいらない、これを削除して試してください