「テーブル」ブロックをチェックボックスにより絞り込み機能を実装する方法

以下のコードを「カスタムHTML」ブロックに入力します。
最後の列から情報を取得し、絞り込みを行います。

<div class="select-block">
  <div class="select-block__wrap">
    <div class="select-block__list">
      <span class="select-block__check">
        <input type="checkbox" name="type" value="1"><label>サービス1</label>
      </span>
      <span class="select-block__check">
        <input type="checkbox" name="type" value="2"><label>サービス2</label>
      </span>
      <span class="select-block__check">
        <input type="checkbox" name="type" value="3"><label>サービス3</label>
      </span>
      <span class="select-block__check">
        <input type="checkbox" name="type" value="4"><label>サービス4</label>
      </span>
    </div>
    <div class="select-block__reset">選択を解除</div>
  </div>
</div>

<table class="select-table">
  <tr>
    <th>ショップ</th>
    <th>料金</th>
    <th>サービス</th>
  </tr>
  <tr>
    <td>Aクリニック</td>
    <td>10,000円</td>
    <td>1,2,3,4</td>
  </tr>
  <tr>
    <td>Bクリニック</td>
    <td>15,000円</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Cクリニック</td>
    <td>20,000円</td>
    <td>1,2</td>
  </tr>
  <tr>
    <td>Dクリニック</td>
    <td>12,000円</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Eクリニック</td>
    <td>10,000円</td>
    <td>4</td>
  </tr>
</table>

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  // チェックされたサービス値を格納する配列
  let dataType = [];

  const className = 'hidden';

  /**
   * テーブルの表示状態を更新
   * @return {void}
   */
  function preview() {
    $('.select-table tr').has('td').each(function () {
      // 最後の列（サービス列）のテキストを取得し、カンマ区切りで配列化
      const services = $(this).find('td').last().text();
      const serviceArray = services.split(',').map(s => s.trim());

      // チェックが1つもない場合はすべての行を表示
      if (dataType.length === 0) {
        $(this).removeClass(className);
      } else {
        // 選択されたサービスのいずれかが含まれているかどうかを判定
        const hasMatch = serviceArray.some(n => dataType.includes(n));

        // 一致する場合は表示し、一致しない場合は非表示クラスを追加する
        if (hasMatch) {
          $(this).removeClass(className);
        } else {
          $(this).addClass(className);
        }
      }
    });
  }

  // チェックボックスの状態が変更された場合
  $('.select-block__check input').on('change', function () {
    const value = $(this).val();

    // チェックされた場合は配列に追加し、チェックが外れた場合は配列から除外
    if ($(this).is(':checked')) {
      dataType.push(value);
    } else {
      dataType = dataType.filter(n => n !== value);
    }

    // フィルタリング処理を実行
    preview();
  });

  // 「リセット」ボタンがクリックの場合
  $('.select-block__reset').on('click', function () {
    // 全チェックボックスの選択を解除
    $('.select-block__check input').prop('checked', false);
    dataType = [];
    preview();
  });
});

以下のコードをstyle.cssに追加します。

/* リセットボタン */
.select-block__reset {
  border: 1px solid #ccc;
  cursor: pointer;
  margin-bottom: 1em;
  padding: 5px;
  text-align: center;
}

/* チェックボックスのラベル */
.select-block__check label {
  padding-left: 5px;
}

/* チェックボックスのレイアウト */
.select-block__list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 1em;
}

/* 非表示の行 */
.select-table tr.hidden {
  display: none;
}