冗長なjQueryコードをリファクタリングしたい

Question

###前提・実現したいこと
ページがロードされた時とクリックされた時に、それぞれチェックボックスの状態を取得するコードをjQueryで作成しました。
下記のコードで実現したいことの通りに動くことは動くのですですが、記述の重複があり、リファクタリングの余地があるのではないかと思っております。
アドバイスいただけますと幸いです。どうぞよろしくお願いいたします。

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

$(window).on("load", function() {
  var $checkBox = $('input[type="checkbox"][data-target^="#icon"]');
  var flag = $checkBox.prop("checked") ? "addClass" : "removeClass";
  $($checkBox.attr("data-target"))[flag]("selected");
  $checkBox.on("change", function() {
    var flag = $(this).prop("checked") ? "addClass" : "removeClass";
    $($(this).attr("data-target"))[flag]("selected");
  });
});

Answer 1

addClassとremoveClassをまとめて行う方法として、toggleClassがあります。.toggleClass('class-name', 状態)とすることで、状態がtrueならクラス追加、falseならクラス削除として動きます（リファレンス）。

あと、イベント内の$(this).prop('checked')は、（IE7レベルの古いブラウザまで考えるのでなければ）直接DOMから取ってthis.checkedで必要十分かと思います。

Answer 2

どういったhtmlに対してどういう結果がほしいのかよくわかりませんが
脳内補完して以下でどうでしょう

input[type=checkbox].selected{opacity: 0.1;}

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

<input type="checkbox" name="c1" value="1" data-target="#icon1">
<input type="checkbox" name="c2" value="2" data-target="#icon2">
<input type="checkbox" name="c3" value="3" data-target="#icon3">
<input type="checkbox" name="c4" value="4" data-target="対象外">

念のため

言われてみればtargetと書いてあるのですから入力部分のチェックボックスと
表示部分はちがうと気づくべきでしたね。失礼しました。
念のため結果を追記しておきます

div.selected{background-Color:red;}

$(()=>{
  $('input[type="checkbox"][data-target^="#icon"]').on('change',(e)=>{
    var t=e.target
    $($(t).data('target')).toggleClass('selected',t.checked);
  }).trigger('change');
});

<input type="checkbox" name="c1" value="1" data-target="#icon1">
<input type="checkbox" name="c2" value="2" data-target="#icon2">
<input type="checkbox" name="c3" value="3" data-target="#icon3">
<input type="checkbox" name="c4" value="4" data-target="対象外">

<div id="icon1">icon1</div>
<div id="icon2">icon2</div>
<div id="icon3">icon3</div>

Answer 3

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

yambejpさんmaisumakunさんの助言を参考にリファクタリングしたところ最終的にこのようなコードとなり、文字数は349から180と約半分にすることができました。お二方の意見どちらも大変参考になりました。どうもありがとうございました。

Comments

[yambejp]

data-targetの仕様がよくわからなかったのですが、
なるほどそういうことですか。
念のため回答に追記しときました。