2つ以上のラジオボタンの条件を同時に満たすフィルタをつくりたい2

Question

実現したいこと

ふたつのラジオボタンをそれぞれ選択した際、
リストの中から「AかつB」のものが抽出される状態を目指しています。
(例：ボタン1 → 人を選択　ボタン2 → 動作を選択
抽出結果 → Aさんが歩く　のようなイメージです。

この時に「AさんとBさんが歩く」という結果があり、
ボタン1でAさん、Bさんどちらを選択しても、動作が歩くであれば
「AさんとBさんが歩く」も一緒に抽出されるようにしたいです。
（ボタン1がAさん、ボタン2が歩くなら、「Aさんが歩く」と「AさんとBさんが歩く」が抽出される）

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

前提

以下のURLの質問に、一つ条件を加えたものになります。
https://teratail.com/questions/b1s9ddtp9ij5co#reply-mewfgfz1q7tzj7

該当のソースコード

<form>
<ul>
 <li><input type="radio" id="who-All" name="who" value="All" checked>
 <label for="who-All">All</label></li>
 <li><input type="radio" id="CharaA" name="who" value="CharaA">
 <label for="CharaA">Aさん</label></li>
 <li><input type="radio" id="CharaB" name="who" value="CharaB">
 <label for="CharaB">Bさん</label></li>
</ul>
<ul>
 <li><input type="radio" id="who-All" name="what" value="All" checked>
 <label for="who-All">All</label></li>
 <li><input type="radio" id="Walk" name="what" value="Wark">
 <label for="Walk">歩く</label></li>
 <li><input type="radio" id="Sing" name="what" value="Sing">
 <label for="Sing">歌う</label></li>
</ul>
<form>

<ul class="filter">	
 <li class="target" data-who="CharaA" data-what="Walk">
 <p>Aさんが歩く</p>
 </li>
 <li class="target" data-who="CharaB" data-what="Walk">
 <p>Bさんが歩く</p>
 </li>
 <li class="target" data-who="CharaA" data-what="Sing">
 <p>Aさんが歌う</p>
 </li>
 <li class="target" data-who="CharaB" data-what="Sing">
 <p>Bさんが歌う</p>
 <li class="target" data-who="CharaA CharaB" data-what="Walk">
 <p>AさんとBさんが歩く</p>
 </li>
</ul>

<script>
window.addEventListener('DOMContentLoaded', function(){

  document.forms[0].addEventListener('change', () => {
    document.querySelectorAll('.target').forEach(item => {
      const categories = item.dataset.category.split(' ');
      const isDisplayed = ['who', 'what'].every(
        (name, i) => ['All', categories[i]].includes(document.forms[0][name].value)
      );
      item.style.display = isDisplayed ? 'list-item' : 'none';
    })
  });

});
</script>

Comments

[int32_t]

やりたいことは書いてありますが、質問がありません。

Answer 1

こう修正ですかね：

window.addEventListener('DOMContentLoaded', function(){

  document.forms[0].addEventListener('change', () => {
    document.querySelectorAll('.target').forEach(item => {
      const names = ['who', 'what'];
      const data = names.map(name => item.dataset[name].split(' '));
      const isDisplayed = names.every(
        (name, i) => ['All', ...data[i]].includes(document.forms[0][name].value)
      );
      item.style.display = isDisplayed ? 'list-item' : 'none';
    })
  });

});

上記のコードは、以下のように Cさん と 走る を追加したHTMLにも対応します。

<form>
  <ul>
    <li><input type="radio" id="who-All" name="who" value="All" checked>
      <label for="who-All">All</label></li>
    <li><input type="radio" id="CharaA" name="who" value="CharaA">
      <label for="CharaA">Aさん</label></li>
    <li><input type="radio" id="CharaB" name="who" value="CharaB">
      <label for="CharaB">Bさん</label></li>
    <li><input type="radio" id="CharaC" name="who" value="CharaC">
      <label for="CharaC">Cさん</label></li>
  </ul>
  <ul>
    <li><input type="radio" id="what-All" name="what" value="All" checked>
      <label for="what-All">All</label></li>
    <li><input type="radio" id="Walk" name="what" value="Walk">
      <label for="Walk">歩く</label></li>
    <li><input type="radio" id="Sing" name="what" value="Sing">
      <label for="Sing">歌う</label></li>
    <li><input type="radio" id="Run" name="what" value="Run">
      <label for="Run">走る</label></li>
  </ul>
</form>

<ul class="filter">
  <li class="target" data-who="CharaA" data-what="Walk">
    <p>Aさんが歩く</p>
  </li>
  <li class="target" data-who="CharaB" data-what="Walk">
    <p>Bさんが歩く</p>
  </li>
  <li class="target" data-who="CharaC" data-what="Walk">
    <p>Cさんが歩く</p>
  </li>
  <li class="target" data-who="CharaA" data-what="Sing">
    <p>Aさんが歌う</p>
  </li>
  <li class="target" data-who="CharaB" data-what="Sing">
    <p>Bさんが歌う</p>
  </li>
  <li class="target" data-who="CharaC" data-what="Sing">
    <p>Cさんが歌う</p>
  </li>
  <li class="target" data-who="CharaA" data-what="Run">
    <p>Aさんが走る</p>
  </li>
  <li class="target" data-who="CharaB" data-what="Run">
    <p>Bさんが走る</p>
  </li>
  <li class="target" data-who="CharaC" data-what="Run">
    <p>Cさんが走る</p>
  </li>
  <li class="target" data-who="CharaA CharaB" data-what="Walk">
    <p>AさんとBさんが歩く</p>
  </li>
  <li class="target" data-who="CharaC" data-what="Walk Sing">
    <p>Cさんが歩く。そして歌う。</p>
  </li>
  <li class="target" data-who="CharaA CharaC" data-what="Sing Run">
    <p>AさんとCさんが歌う。そして走る。</p>
  </li>
</ul>

備考

上記で回答したJSのコードは、現状の2個のフィルター who,what に加えて例えば when(いつ) や where(どこで) が追加されても、HTMLの構造やdata属性の設計が保たれている限りは

- const names = ['who', 'what'];
+ const names = ['who', 'what', 'when', 'where'];

という修正だけで対応できそうです。

Comments

[maki_oden]

理想通りの動きになりました！
本当に、本当に助かりました！ありがとうございました！！
備考に記載いただいたことも、疑問を先回りしていただき、心苦しいばかりです。
幾度お礼を言ってもキリがありませんが、本当にありがとうございました！