JavaScriptでチェックボックスを使い条件分岐し、画像を出し分けたい

Question

過去の質問をアレンジしたい

https://teratail.com/questions/120503
こちらの質問で出たコードをアレンジして以下の条件で画像を表示／非表示ができるようにしたいと思っています。

チェックボックスで選択された条件を元に、画像を出し分けたい

例）
fishを選択したらimg1を表示する（img2,img3は非表示）
fruitsを選択したらimg2を表示する（img1,img3は非表示）
fish,fruitsを選択したらimg3を表示する（img1,img2は非表示）

fishとfruitsが選択されている場合にのみ
img3が表示されるようにしたいです。

<ul>
<li><label><input id="fish" type="checkbox">まぐろ</label></li>
<li><label><input id="fish" type="checkbox">サーモン</label></li>
<li><label><input id="fruits" type="checkbox">りんご</label></li>
<li><label><input id="fruits" type="checkbox">なし</label></li>
</ul>

<div class="img_list">
<img class="fish" href="/img1"/>
<img class="fruits" href="/img2"/>
<img class="fruits_and_fish" href="/img3"/>
</div>

(function($) {
  //対象のimg一覧取得
  var img_list = $(".img_list img");

  //チェックボックスのチェック状態により作動
  $('.check').change(function() {
    //チェックされているボックスの情報を全て取る
    var info = $('.check:checked').map(function() {
      return $(this).val();
    });

    //半角スペースで結合
    if (info.length == 0) {
      img_list.css('display', 'none');
    } else {
      //img一覧をループ
      for (i = 0; i < img_list.length; i++) {
        hasCount = 0;
        for (infoi = 0; infoi < info.length; infoi++) {
          if ($(img_list[i]).hasClass(info[infoi])) {
            hasCount++;
          }
        }
        if (hasCount > 0) { //チェックされたもの1つでも持っていれば表示
          $(img_list[i]).css('display', 'block');
        } else {
          $(img_list[i]).css('display', 'block');
        }
      }
    }
  });

})(jQuery);

元のコードからカラー部分などを変更してみた

元のコードも条件が重なった状態で表示できるものでしたが、置き換えてみてもダメでした。
JavaScriptがまだまだ苦手でして・・・。
どなたかご教示いただけないでしょうか。