チェックボックスによる絞り込み検索を実装したい。

Question

チェックボックスによる絞り込み検索を実装したい。また表示されるものに複数のカテゴリを持たせ、どれか一つでも該当した場合に表示させるような仕様にしたい。

### 発生している問題・分からないこと
ネットで調べて実装してみましたが、カテゴリを複数指定することができません。複数指定すると指定したカテゴリにチェックを入れても表示されなくなってしまいました。



### 該当のソースコード

```jQuery
jQuery(function ($) {

  $(".works_form_detail :checkbox").on("click", function () {

    var checked = [];

    $(".works_form_detail :checked").each(function () {

      checked.push($(this).val()); // pushは配列に値を追加します

    });

    console.log(checked);



    $(".works_list_item").each(function () {

      var category = $(this).data("category");

      console.log(category);

      // fun(worklist, category);

      var is_exist = $.inArray(category, checked); // inArray()は配列内に値があるかどうかを調べます

      if (is_exist != -1) {

        $(this).removeClass("hidden");

      } else {

        $(this).addClass("hidden");

      }

    });

  });

});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

一つのカテゴリのみ指定するような仕様では実装できたが、複数指定はできなかった。

補足

<div class="works_search-box">
                <div class="works_contents l_container-lg">
                    <form action="" class="works_form">
                        <dl class="works_form_list">
                            <dt class="works_form_heading">
                                <span class="search-box_label">深絞り</span>
                            </dt>
                            <dd class="works_form_detail">
                                <label><input type="checkbox" name="category[]" value="deep01" class="deep_checkbox works_form_checkbox">超深絞り</label>
                                <label><input type="checkbox" name="category[]" value="deep02" class="deep_checkbox works_form_checkbox">深絞り+α</label>
                                <label><input type="checkbox" name="category[]" value="deep03" class="deep_checkbox works_form_checkbox">難形状</label>
                            </dd>
                            <dt class="works_form_heading"></dt>
                            <dd class="works_form_detail">
                                <label><input type="checkbox" name="category[]" value="change01" class="change_checkbox works_form_checkbox"><span class="search-box_label">工法転換</span></label>
                                <label>（コストダウン・軽量化・スピードアップ）</label>
                            </dd>
                            <dt class="works_form_heading"></dt>
                            <dd class="works_form_detail">
                                <label><input type="checkbox" name="category[]" value="change02" class="change_checkbox works_form_checkbox"><span class="search-box_label">板鍛造</span></label>
                            </dd>
                            <dt class="works_form_heading">
                                <span class="search-box_label">材質</span>
                            </dt>
                            <dd class="works_form_detail">
                                <label><input type="checkbox" name="category[]" value="material01" class="material_checkbox works_form_checkbox">鉄</label>
                                <label><input type="checkbox" name="category[]" value="material02" class="material_checkbox works_form_checkbox">鍍金鋼板・ZAM</label>
                                <label><input type="checkbox" name="category[]" value="material03" class="material_checkbox works_form_checkbox">ステンレス</label>
                                <label><input type="checkbox" name="category[]" value="material04" class="material_checkbox works_form_checkbox">アルミ</label>
                                <label><input type="checkbox" name="category[]" value="material05" class="material_checkbox works_form_checkbox">銅・真鍮</label>
                                <label><input type="checkbox" name="category[]" value="material06" class="material_checkbox works_form_checkbox">ハイテン</label>
                            </dd>
                        </dl>
                        <div class="m_btn-wrapper works_form_btn-wrapper">
                            <a href="" class="m_btn works_btn">すべて表示</a>
                            <!-- <label><input id="select-all" class="m_btn works_btn" type="reset" value="全解除" /></label> -->
                        </div>
                    </form>
                </div>
            </div>
            <section class="works-list">
                <div class="works_contents l_container-lg">
                    <div class="l_contents">
                        <ul class="works_list_items">
                            <li class="works_list_item" data-category="deep01">
                                <div class="swiper-slide works_list_img-wrapper">
                                    <img 
                                    src="img/works-01.jpg"
                                    width="6"
                                    height="4" 
                                    alt="製品の写真" 
                                    class="works_list_img"
                                    loading="lazy">
                                </div>
                                <div class="works_desc_wrapper">
                                    <div class="works_desc">
                                        <p class="works_desc_text">車載用バッテリーケース</p>
                                    </div>
                                    <!-- <div class="works_desc">
                                        <p class="works_desc_text">業界</p>
                                        <p class="works_desc_text">テキスト</p>
                                    </div>
                                    <div class="works_desc">
                                        <p class="works_desc_text">被加工素材</p>
                                        <p class="works_desc_text">テキスト</p>
                                    </div>
                                    <div class="works_desc">
                                        <p class="worcs_desc_text">解説</p>
                                        <p class="worcs_desc_text">テキスト</p>
                                    </div> -->
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
             </section>

Comments

[int32_t]

HTMLも開示してください。

[yambejp]

チェックボックスでHTMLの複数の要素から該当する部分を抽出するということですよね？
まずはHTMLを提示し、どういう条件でどう絞り込みたいか提示されたほうがよいかと
またチェックボックスはand検索ですか？or検索ですか？

[matsu766]

追記させていただきました。
仕様はor検索での実装が希望です。

[yambejp]

HTMLをみると深絞りと材質のカテゴリー間はand検索、それぞれのカテゴリー内はor検索にしたいような構成なのですが全部or検索でよいのでしょうか？

[juner]

マークダウンのコードは コードの部分だけに適用してください。
https://teratail.com/help#about-markdown
```
コード
```
の様な書き方するものなので

[juner]

playground としては次の様な感じでしょうか？ https://livecodes.io/?x=id/2yngkhv7sge

[matsu766]

@yambejp　様
お察しの通り、カテゴリ間はand検索、カテゴリ内はor検索にしたいです。

[matsu766]

@juner　様
こちらどのような挙動をされていますか？
確認させていただきましたが、うまく動いていないような気がして、、、

[juner]

質問文のソースをそのまま使っているだけなので何が足りないかわからないというニュアンスです。

Answer 1

「複数のカテゴリを持たせ」とのことですがdata-categoryを設定するとした場合値は文字列しか指定できません
複数のカテゴリをもたせる方法としては少し工夫が必要です、できればクラスなどの複数指定できるものにするほうがやりやすいでしょう。

参考

CSSでやるとこんな感じ？

<style>
.works_list_item{display:none;}
fieldset:has([value="category-a"]:checked) ~ ul .category-a,
fieldset:has([value="category-b"]:checked) ~ ul .category-b,
fieldset:has([value="category-c"]:checked) ~ ul .category-c
{display:list-item;}
</style>
<fieldset class="works_form_detail">
<legend>選択</legend>
<label><input type="checkbox" value="category-a">a</label>
<label><input type="checkbox" value="category-b">b</label>
<label><input type="checkbox" value="category-c">c</label>
</fieldset>
<hr>
<ul>
<li class="works_list_item category-a">a</li>
<li class="works_list_item category-b">b</li>
<li class="works_list_item category-c">c</li>
<li class="works_list_item category-a category-c">a c</li>
<li class="works_list_item category-b category-c">b c</li>
<li class="works_list_item category-a category-b category-c">a b c</li>
</ul>

Answer 2

まず、「どうやって複数のカテゴリをdata-categoryに書くか」を質問者さんが決める必要があります。
その決定にしたがって、以下のコードを、

      var category = $(this).data("category");
      var is_exist = $.inArray(category, checked);
      if (is_exist != -1) {

1. 複数のカテゴリを配列として取り出せるように変更する
2. その配列の要素それぞれについて checkedに含まれるかどうか調べ、
3. 一つでも含まれていたらhiddenクラスを消す、そうでないならhiddenクラスを足す

のように変更します。

Answer 3

こんな感じにしてみました。
細かいところは変更が必要かもしれません。
また、素のjavascriptなのでjqueryに変換して書く必要があります。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="works_search-box">
        <div class="works_contents l_container-lg">
            <form action="" class="works_form">
                <dl class="works_form_list">
                    <dt class="works_form_heading">
                        <span class="search-box_label">深絞り</span>
                    </dt>
                    <dd class="works_form_detail">
                        <label><input type="checkbox" name="category[]" value="deep01"
                                class="deep_checkbox works_form_checkbox">超深絞り</label>
                        <label><input type="checkbox" name="category[]" value="deep02"
                                class="deep_checkbox works_form_checkbox">深絞り+α</label>
                        <label><input type="checkbox" name="category[]" value="deep03"
                                class="deep_checkbox works_form_checkbox">難形状</label>
                    </dd>
                    <dt class="works_form_heading"></dt>
                    <dd class="works_form_detail">
                        <label><input type="checkbox" name="category[]" value="change01"
                                class="change_checkbox works_form_checkbox"><span
                                class="search-box_label">工法転換</span></label>
                        <label>（コストダウン・軽量化・スピードアップ）</label>
                    </dd>
                    <dt class="works_form_heading"></dt>
                    <dd class="works_form_detail">
                        <label><input type="checkbox" name="category[]" value="change02"
                                class="change_checkbox works_form_checkbox"><span
                                class="search-box_label">板鍛造</span></label>
                    </dd>
                    <dt class="works_form_heading">
                        <span class="search-box_label">材質</span>
                    </dt>
                    <dd class="works_form_detail">
                        <label><input type="checkbox" name="category[]" value="material01"
                                class="material_checkbox works_form_checkbox">鉄</label>
                        <label><input type="checkbox" name="category[]" value="material02"
                                class="material_checkbox works_form_checkbox">鍍金鋼板・ZAM</label>
                        <label><input type="checkbox" name="category[]" value="material03"
                                class="material_checkbox works_form_checkbox">ステンレス</label>
                        <label><input type="checkbox" name="category[]" value="material04"
                                class="material_checkbox works_form_checkbox">アルミ</label>
                        <label><input type="checkbox" name="category[]" value="material05"
                                class="material_checkbox works_form_checkbox">銅・真鍮</label>
                        <label><input type="checkbox" name="category[]" value="material06"
                                class="material_checkbox works_form_checkbox">ハイテン</label>
                    </dd>
                </dl>
                <div class="m_btn-wrapper works_form_btn-wrapper">
                    <a href="" class="m_btn works_btn">すべて表示</a>
                    <!-- <label><input id="select-all" class="m_btn works_btn" type="reset" value="全解除" /></label> -->
                </div>
            </form>
        </div>
    </div>
    <section class="works-list">
        <div class="works_contents l_container-lg">
            <div class="l_contents">
                <ul class="works_list_items">
                    <li class="works_list_item" data-category="deep01">
                        <div class="swiper-slide works_list_img-wrapper">
                            <img src="img/works-01.jpg" width="6" height="4" alt="製品の写真" class="works_list_img"
                                loading="lazy">
                        </div>
                        <div class="works_desc_wrapper">
                            <div class="works_desc">
                                <p class="works_desc_text">車載用バッテリーケース</p>
                            </div>
                            <!-- <div class="works_desc">
                                <p class="works_desc_text">業界</p>
                                <p class="works_desc_text">テキスト</p>
                            </div>
                            <div class="works_desc">
                                <p class="works_desc_text">被加工素材</p>
                                <p class="works_desc_text">テキスト</p>
                            </div>
                            <div class="works_desc">
                                <p class="worcs_desc_text">解説</p>
                                <p class="worcs_desc_text">テキスト</p>
                            </div> -->
                        </div>
                    </li>
                    <li class="works_list_item" data-category="deep02 deep03">
                        <div class="swiper-slide works_list_img-wrapper">
                            <img src="img/works-01.jpg" width="6" height="4" alt="製品の写真" class="works_list_img"
                                loading="lazy">
                        </div>
                        <div class="works_desc_wrapper">
                            <div class="works_desc">
                                <p class="works_desc_text">難形状 or 難形状</p>
                            </div>
                            <!-- <div class="works_desc">
                                <p class="works_desc_text">業界</p>
                                <p class="works_desc_text">テキスト</p>
                            </div>
                            <div class="works_desc">
                                <p class="works_desc_text">被加工素材</p>
                                <p class="works_desc_text">テキスト</p>
                            </div>
                            <div class="works_desc">
                                <p class="worcs_desc_text">解説</p>
                                <p class="worcs_desc_text">テキスト</p>
                            </div> -->
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>

    <script>

        const categoryArray = Array.from(document.getElementsByName('category[]'))
        categoryArray.forEach($category => {
            $category.addEventListener('click', (ev) => {

                const $works_list_items = Array.from(document.querySelectorAll('.works_list_item[data-category]'))
                const activeCategories = new Set(Array.from(categoryArray).filter(category => category.checked).map(category => category.value))

                // すべてのチェックが外れていたら全検索とする
                if (activeCategories.size <= 0) {
                    $works_list_items.forEach($works_list_item => {
                        $works_list_item.classList.remove('hidden')
                    })

                } else {
                    $works_list_items.forEach($works_list_item => {

                        const targetCategorys = new Set($works_list_item.dataset.category.split(' '))
                        const hasCategory = Array.from(activeCategories).some(category => targetCategorys.has(category))

                        if (hasCategory) {
                            $works_list_item.classList.remove('hidden')
                        } else {
                            $works_list_item.classList.add('hidden')
                        }
                    })
                }

            })
        })



    </script>

</body>

</html>