Javascript でチェックボックスで複数選択した際に複数のキーワードのものを表示させたい。

Question

前提・実現したいこと

HTML,javascriptを使って、ぐるなびのような飲食店検索のサイトを作成しているのですが、
例えば、　・貝類　・光物　・白身　・赤身
の4項目でチェックボックスがあります。
選んだ項目の品物が表示されます。

これを仮にマグロが　「赤身」と　「貝類」の２つの項目を満たすものとして
data-filter-key を赤身、貝類の２つにして
赤身を選択した場合と貝類を選択した場合、またはどちらも選択した場合にも
マグロを表示させたいのですが、どうしたらいいかわかりません。

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

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

 <style>
[data-filter-view]:not([data-filter-view=""]) [data-filter-key] {
    display: none;
}
[data-filter-view][data-filter-view~="貝類"] [data-filter-key="貝類"],
[data-filter-view][data-filter-view~="光物"] [data-filter-key="光物"],
[data-filter-view][data-filter-view~="白身"] [data-filter-key="白身"],
[data-filter-view][data-filter-view~="赤身"] [data-filter-key="赤身"] {
    display: block;
}
</style>

<div class="filter" id="js-filter">
<ul class="filter-cond">
<li><label><input type="checkbox" value="貝類">貝類</label></li>
<li><label><input type="checkbox" value="光物">光物</label></li>
<li><label><input type="checkbox" value="白身">白身</label></li>
<li><label><input type="checkbox" value="赤身">赤身</label></li>
<!-- /.filter-cond --></ul>

<ul class="filter-items">
<li data-filter-key="貝類">つぶ貝</li>
<li data-filter-key="白身">カンパチ</li>
<li data-filter-key="赤身">マグロ</li>
<li data-filter-key="光物">コハダ</li>
<li data-filter-key="貝類">バイ貝</li>
<li data-filter-key="白身">マダイ</li>
<li data-filter-key="貝類">サザエ</li>
<!-- /.filter-items --></ul>
<!-- /#js-filter--></div>


●Javascript
var widget = document.getElementById('js-filter');
var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
var checkedList = [];
var i = 0;
var leng = 0;
var filter = function () {
    checkedList = [];

    i = 0;
    leng = checkboxes.length;

    for (i; i < leng; i++) {
        if (checkboxes[i].checked) {
            checkedList.push(checkboxes[i].value);
        }
    }

    widget.setAttribute('data-filter-view', checkedList.join(' '));
};


i = 0;
leng = checkboxes.length;

for (i; i < leng; i++) {
    checkboxes[i].addEventListener('change', filter);
}



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

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

【```】で閉じられていないので、見にくいです。質問を修正してください。
今回なら↓こうです。【プレビューで確認】してから投稿／更新すると上手く行きますよ。
```html
<!-- HTMLコード -->
```

```js
// JavaScriptコード
```

で、考え方としては選択項目ごとに内部で赤貝みたいなものはサブデータ的に持たせて内容が一致するかどうかですかね。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

選択リストをちょっと減らしちゃいましたがこういう事でしょうか。

<ul class="filter-items">
  <li data-filter-key="貝類">つぶ貝</li>
  <li data-filter-key="白身">カンパチ</li>
  <li data-filter-key="赤身 貝類">マグロ</li>
  <!--
  <li data-filter-key="光物">コハダ</li>
  <li data-filter-key="貝類">バイ貝</li>
  <li data-filter-key="白身">マダイ</li>
  <li data-filter-key="貝類">サザエ</li>
  -->
  <!-- /.filter-items -->
</ul>

ここが役立ちました。
https://teratail.com/questions/143816

今回だと、data-filter-keyが完全一致指定（=指定）になっていたので、
部分一致指定（~=指定）に書き換えましたという事になります。

マグロを貝類でも表示する場合はこうなります。

style部分
[data-filter-key="貝類"] ⇒ [data-filter-key~="貝類"]

html部分
<li data-filter-key="赤身">マグロ</li> ⇒ <li data-filter-key="赤身 貝類">マグロ</li>

Comments

[usagi01]

ありがとうございます！
まさに、こちらで解決しました。

本当にありがとうございました！！！