チェックボックスを3つ以上チェックしたら「画像変更」したいがうまくいかない

Question

閲覧ありがとうございます。

タイトル通り、チェックボックスを3つ以上チェックしたら「画像変更」したいのですが、
うまくいかず苦戦しています。
アドバイスいただけると嬉しいです。

【やりたいとこの詳細】
アンケート型LPで、用意したアンケートのチェックボックス3つをチェックしたら
キャンペーンのリンク先へ飛ばすということをしたく、下記の実装を希望しています。

1:画像の変更(無色からカラーのものへ)
2:リンク先の付与

2はうまくできました。
しかし1は、3つ以上チェックしたらカラーに変わりますが、
変更後にチェックを3以下にへらしても元の無色の画像に戻らないです。

下記の内容を修正、もしくは他のコードのアイディアがありましたら
ご指摘ください。

よろしくお願いいたします。

該当のソースコード

<label><input type="checkbox" class="checkbox">チェックボックス1</label>
<label><input type="checkbox" class="checkbox">チェックボックス1</label>
<label><input type="checkbox" class="checkbox">チェックボックス1</label>
<div id="btn">
　<img src="img/btn_off.png" alt="">
</div>

$(function () {

  $("input[type='checkbox']").on('change', function () {

    $('#btn').each(function(){
      var src_off = $('#btn').find('img').attr('src');
      var src_on = src_off.replace('_off','_on');
      $('<img/btn_off.png>').attr('src', src_on);
      
      //チェックされているチェックボックスの数が3つ以上
      if ($(".checkbox:checked").length > 2) {
      //ボタン有効
        $('#btn').find('img').attr('src', src_on);
        $('#btn').wrap(
          $('<a></a>').attr({href:"https://www.google.com/?hl=ja",target:"_blank"})
        );
      } else {
      //ボタン無効
        $('#btn').find('img').attr('src', src_off);
        $('#btn').unwrap();
      }
    });

  });

});

補足情報（FW/ツールのバージョンなど）

jqueryバージョン　3.4.1

Answer 1

以下のコードを冒頭の$(function(){直下に移動させてみてください。

      var src_off = $('#btn').find('img').attr('src');
      var src_on = src_off.replace('_off','_on');

あと、以下の部分は不要です。閉じタグと共に削除しましょう。そもそもidは一つだけなので、eachでループさせるのはおかしいです。

$('#btn').each(function(){

Comments

[HiroK59]

ありがとうございます。希望通りの動きになりました！！
よろしければ、$(function(){直下に移動させると機能する理由もご教示いただけませんでしょうか？

[cerfweb]

変数src_off, src_onはこの場合checkboxの状態によって変わるべきものではないため、影響を受けないところに移動させたというわけです。

[HiroK59]

とても納得です。最後までご説明ありがとうございます。