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がまだまだ苦手でして・・・。
どなたかご教示いただけないでしょうか。

Answer 1

<script>
document.addEventListener('change',()=>{
  const s1=sample1.checked;
  const s2=sample2.checked;
  document.querySelectorAll('.info1,.info2').forEach(x=>{
    x.toggleAttribute('hidden',
    (x.matches(':not(.info2)') && (!s1 ||  s2)) ||
    (x.matches(':not(.info1)') && ( s1 || !s2)) ||
    (x.matches('.info1.info2') && (!s1 || !s2)));
  });
});
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.info1,.info2').forEach(x=>x.setAttribute('hidden',1));
});
</script>
<ul>
<li><label><input id="sample1" type="checkbox">これは条件1です</label></li>
<li><label><input id="sample2" type="checkbox">これは条件2です</label></li>
</ul>
<div class="info1">条件1-1</div>
<div class="info2">条件2-1</div>
<div class="info1 info2">条件3-1</div>
<div class="info1">条件1-2</div>
<div class="info2">条件2-2</div>
<div class="info1 info2">条件3-2</div>

ちょっと条件分けをわかりやすく

追記

<script>
document.addEventListener('change',()=>{
  const s1=document.querySelector('[data-id=sample1]:checked');
  const s2=document.querySelector('[data-id=sample2]:checked');
  document.querySelectorAll('.info1,.info2').forEach(x=>{
    x.toggleAttribute('hidden',
    (x.matches(':not(.info2)') && (!s1 ||  s2)) ||
    (x.matches(':not(.info1)') && ( s1 || !s2)) ||
    (x.matches('.info1.info2') && (!s1 || !s2)));
  });
});
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.info1,.info2').forEach(x=>x.setAttribute('hidden',1));
});
</script>
<ul>
<li><label><input data-id="sample1" type="checkbox">これは条件1です</label></li>
<li><label><input data-id="sample2" type="checkbox">これは条件2です</label></li>
<li><label><input data-id="sample1" type="checkbox">これは条件1です</label></li>
<li><label><input data-id="sample2" type="checkbox">これは条件2です</label></li>
</ul>
<div class="info1">条件1-1</div>
<div class="info2">条件2-1</div>
<div class="info1 info2">条件3-1</div>
<div class="info1">条件1-2</div>
<div class="info2">条件2-2</div>
<div class="info1 info2">条件3-2</div>

Comments

[shin12t]

ご回答をありがとうございます！
HTML
<ul>
<li><label><input id="sample1" type="checkbox">これは条件1です</label></li>
<li><label><input id="sample2" type="checkbox">これは条件2です</label></li>
<li><label><input id="sample2" type="checkbox">これは条件3です</label></li>
<li><label><input id="sample1" type="checkbox">これは条件4です</label></li>
</ul>

このように文章が変わり、出し分けたい条件は一緒の場合
どのように追記したら良いでしょうか？

それと、以下のように条件は3つにしたいです。
<div class="img_list">
<img class="info1" href="/img1"/>
<img class="info2" href="/img2"/>
<img class="info1 info2" href="/img3"/>
</div>

[yambejp]

複数の要素に同じidはつけられません。
ちょっと意味がわかりませんが追記しておきます

[shin12t]

そうですよね・・・。
classで指定することはできますか？

[yambejp]

追記分はカスタムデータで判定しています

[shin12t]

うまく伝えられず不甲斐ないです・・・

<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>

具体的に説明するとこんな感じです。

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

[shin12t]

失礼しました。
いただいたデータでできそうですね

ありがとうございます！