各checkbox非選択時の出力をallリセットボタン押下時の出力と一致させたい

前提・実現したいこと

javascript(jquery)で
各要素ごとに行なうリセットの表示(checkbox2回押下時)とallリセットボタン押下時の表示を一致させたいです。(allリセットボタン押下時の表示に揃えたいです)
素人ながら色々調べて試してみましたが、解決できなかったのでこちらで質問させて頂きました。

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

要素は何も選択されていないはずなのに、全要素が表示されてしまいます。
⇔「各要素ごとで行なったリセットの表示≠allリセットボタンの表示」)

該当のソースコード

HTML
1        <form>
2                <div class="search-box brand">
3                        <h2 class="search-box_label">犬種</h2>
4                        <ul>
5                                <li><input type="checkbox" name="brand" value="チワワ" id="chihuahua"><label for="chihuahua"
6                                                class="label">チワワ</label></li>
7                                <li><input type="checkbox" name="brand" value="柴犬" id="shibainu"><label for="shibainu"
8                                                class="label">柴犬</label></li>
9                        </ul>
10                </div>
11                <div class="search-box size">
12                        <h2 class="search-box_label">色</h2>
13                        <ul>
14                                <li><input type="checkbox" name="size" value="白色" id="white"><label for="white"
15                                                class="label">白色</label>
16                                </li>
17                                <li><input type="checkbox" name="size" value="茶色" id="brown"><label for="brown"
18                                                class="label">茶色</label>
19                                </li>
20                        </ul>
21                </div>
22                <div class="search-box type">
23                        <h2 class="search-box_label">体型</h2>
24                        <ul>
25                                <li><input type="checkbox" name="type" value="赤ちゃん" id="baby"><label for="baby"
26                                                class="label">赤ちゃん</label>
27                                </li>
28                                <li><input type="checkbox" name="type" value="大人" id="adult"><label for="adult"
29                                                class="label">大人</label>
30                                </li>
31                        </ul>
32                </div>
33                <div class="reset">
34                        <input type="reset" name="reset" value="リセット" class="reset-button">
35                </div>
36        </form>
37        <ul class="list">
38                <li class="list_item list_toggle" data-brand="チワワ" data-size="白色" data-type="赤ちゃん"><img
39                                src="https://drive.google.com/uc?export=view&id=1SfPXI96_ijo0OFV7N05vszKOYc_SN644"
40                                alt=""></li>
41                <li class="list_item list_toggle" data-brand="チワワ" data-size="白色" data-type="大人"><img
42                                src="https://drive.google.com/uc?export=view&id=17yGYCWdiEdCI6xz2BAJN3Q2sQrM71akw"
43                                alt=""></li>
44                <li class="list_item list_toggle" data-brand="チワワ" data-size="茶色" data-type="赤ちゃん"><img
45                                src="https://drive.google.com/uc?export=view&id=1KUFSriI2NznjH2oR0NCBZIDNAHU-MHz1"
46                                alt=""></li>
47                <li class="list_item list_toggle" data-brand="チワワ" data-size="茶色" data-type="大人"><img
48                                src="https://drive.google.com/uc?export=view&id=131yXqBtOqbHJ0NirmnA0lFbS92HON_kV"
49                                alt=""></li>
50                <li class="list_item list_toggle" data-brand="柴犬" data-size="白色" data-type="赤ちゃん"><img
51                                src="https://drive.google.com/uc?export=view&id=13kGzlyG1KNwc0RjVqQ_524FYU3IypC5i"
52                                alt=""></li>
53                <li class="list_item list_toggle" data-brand="柴犬" data-size="茶色" data-type="赤ちゃん"><img
54                                src="https://drive.google.com/uc?export=view&id=1XnX7cHGSuGa3DjrkTuLSsvPBC9ZSml21"
55                                alt=""></li>
56                <li class="list_item list_toggle" data-brand="柴犬" data-size="茶色" data-type="大人"><img
57                                src="https://drive.google.com/uc?export=view&id=1_3QbN0azReVJ_Q814fwtUn0lGg5PUDbw"
58                                alt=""></li>
59                <li class="list_item list_toggle no_list"></li>
60
61        </ul>

css
1ul {
2  padding: 0;
3}
4li {
5  list-style: none;
6}
7form {
8  background: #fff0f5;
9  padding: 10px 10px;
10  border-radius: 5px;
11}
12form ul {
13  display: block;
14  flex-wrap: wrap;
15}
16input[type="checkbox"] {
17  display: none;
18}
19.brand input[type="checkbox"]:checked + label {
20  background: #ff7bac; /* マウス選択時の背景色を指定する */
21  color: #ffffff; /* マウス選択時のフォント色を指定する */
22}
23.size input[type="checkbox"]:checked + label {
24  background: #3fa9f5; /* マウス選択時の背景色を指定する */
25  color: #ffffff; /* マウス選択時のフォント色を指定する */
26}
27.type input[type="checkbox"]:checked + label {
28  background: #fbb03b; /* マウス選択時の背景色を指定する */
29  color: #ffffff; /* マウス選択時のフォント色を指定する */
30}
31.brand .label:hover {
32  background-color: #f8c2d6; /* マウスオーバー時の背景色を指定する */
33}
34.size .label:hover {
35  background-color: #e2edf9; /* マウスオーバー時の背景色を指定する */
36}
37.type .label:hover {
38  background-color: #ffdfaa; /* マウスオーバー時の背景色を指定する */
39}
40
41.label {
42  display: block; /* ブロックレベル要素化する */
43  margin: 5px; /* ボックス外側の余白を指定する */
44  width: 100px; /* ボックスの横幅を指定する */
45  height: 45px; /* ボックスの高さを指定する */
46  padding-left: 5px; /* ボックス内左側の余白を指定する */
47  padding-right: 5px; /* ボックス内御右側の余白を指定する */
48  text-align: center; /* テキストのセンタリングを指定する */
49  line-height: 45px; /* 行の高さを指定する */
50  cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
51  border-radius: 25px; /* 角丸を指定する */
52}
53
54.brand .label {
55  border: 2px solid #ff7bac; /* ボックスの境界線を実線で指定する */
56  color: #008900; /* フォントの色を指定 */
57}
58.size .label {
59  border: 2px solid #3fa9f5; /* ボックスの境界線を実線で指定する */
60  color: #b20000; /* フォントの色を指定 */
61}
62.type .label {
63  border: 2px solid #fbb03b; /* ボックスの境界線を実線で指定する */
64  color: #0000b2; /* フォントの色を指定 */
65}
66
67.search-box_label {
68  font-weight: bold;
69}
70.is-hide {
71  display: none;
72}
73
74.list_toggle {
75  display: none;
76}
77
78.under_line {
79  width: 500px;
80}
81.search-box h2 {
82  margin: 0;
83}
84
85.reset-button {
86  width: 25%;
87  margin: 20px auto 0;
88  line-height: 30px;
89  background: #ccc;
90  border-radius: 25px;
91  border: none;
92  cursor: pointer;
93}
94.reset-button:hover {
95  background: #999;
96}
97.nothing {
98  display: none;
99}
100
101.list {
102  display: flex;
103  flex-wrap: wrap;
104}
105.list li {
106  width: 300px;
107  height: 200px;
108  padding: 20px;
109  margin: auto;
110  object-fit: cover;
111}
112
113.list li img {
114  width: 100%;
115  height: 100%;
116  object-fit: cover;
117}
118

jquery
1
2/**
3 * チェックボックスがクリックされた瞬間を拾うコード
4 **/
5$(function() {
6  $(".label").click(function() {
7    $(".list li").removeClass("list_toggle");
8  });
9  if ($(".list li").hasClass("list_toggle")) {
10    $(".reset .reset-button").click(function() {
11      $(".list li").addClass("list_toggle");
12    });
13  }
14});
15
16/* チェックボックスがクリックされた瞬間を拾うコード(選択及び単品なら選択解除可) */
17$(function () {
18    $('input[type=radio]').click(function () {
19        if ($(this).prop('checked')) {
20            $(".list li").removeClass("list_toggle");
21        } else {
22            $(".list li").addClass("list_toggle");
23        }
24    });
25});
26
27/**
28 * 絞り込み機能
29 **/
30var searchBox = ".search-box"; // 絞り込む項目を選択するエリア
31var listItem = ".list_item"; // 絞り込み対象のアイテム
32var hideClass = "is-hide"; // 絞り込み対象外の場合に付与されるclass名
33
34$(function() {
35  // 絞り込み項目を変更した時
36  $(document).on("change", searchBox + " input", function() {
37    search_filter();
38  });
39});
40
41/**
42 * リストの絞り込みを行う
43 */
44function search_filter() {
45  // 非表示状態を解除
46  $(listItem).removeClass(hideClass);
47  for (var i = 0; i < $(searchBox).length; i++) {
48    var name = $(searchBox)
49      .eq(i)
50      .find("input")
51      .attr("name");
52    // 選択されている項目を取得
53    var searchData = get_selected_input_items(name);
54    // 選択されている項目がない、またはALLを選択している場合は飛ばす
55    if (searchData.length === 0 || searchData[0] === "") {
56      continue;
57    }
58    // リスト内の各アイテムをチェック
59    for (var j = 0; j < $(listItem).length; j++) {
60      // アイテムに設定している項目を取得
61      var itemData = $(listItem)
62        .eq(j)
63        .data(name);
64      // 絞り込み対象かどうかを調べる
65      if (searchData.indexOf(itemData) === -1) {
66        $(listItem)
67          .eq(j)
68          .addClass(hideClass);
69      }
70    }
71  }
72}
73
74function get_selected_input_items(name) {
75  var searchData = [];
76  $("[name=" + name + "]:checked").each(function() {
77    searchData.push($(this).val());
78  });
79  return searchData;
80}

試したこと

$("#chihuahua").on("click", function () {
if ($(this).prop("checked") == true) {
$(".list li").removeClass("list_toggle");
} else {
$(".list li").addClass("list_toggle");
}
});

～

$("#adult").on("click", function () {
if ($(this).prop("checked") == true) {
$(".list li").removeClass("list_toggle");
} else {
$(".list li").addClass("list_toggle");
}
});

を入れるとallリセットと同じ表示は実現できましたが、要素が残っているのにも関わらず全リセットされてしまい、一部おかしな挙動になってしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

search_filterの処理の流れが理解できなかったので、一旦以下の通り修正してみました。

JavaScript
1        /**
2         * リストの絞り込みを行う
3         */
4        function search_filter() {
5            // リスト内の各アイテムをチェック
6            var noCheckFlg = true;
7            for (var j = 0; j < $(listItem).length; j++) {
8                var hitFlg = true;
9                for (var i = 0; i < $(searchBox).length; i++) {
10                    var name = $(searchBox)
11                    .eq(i)
12                    .find("input")
13                    .attr("name");
14                    // 選択されている項目を取得
15                    var searchData = get_selected_input_items(name);
16                    // 選択されている項目がない、またはALLを選択している場合は飛ばす
17                    if (searchData.length === 0 || searchData[0] === "") {
18                        hitFlg &= true;
19                        continue;
20                    }
21                    noCheckFlg = false;
22                    // アイテムに設定している項目を取得
23                    var itemData = $(listItem)
24                        .eq(j)
25                        .data(name);
26                    // 絞り込み対象かどうかを調べる
27                    hitFlg &= (searchData.indexOf(itemData) !== -1) 
28                }
29                
30                if (hitFlg && !noCheckFlg) {
31                    $(listItem)
32                    .eq(j)
33                    .removeClass(hideClass);
34                } else {
35                    $(listItem)
36                    .eq(j)
37                    .addClass(hideClass);
38                }
39            }
40        }

処理の流れは、

・画像データごとにチェックをする。
　・犬種・色・体型をand条件とする。（hitFlg）
　・カテゴリごとにチェックする。
　　・何もチェックされていなかったら、検索絞りから外す。（hitFlg &= true）
　　・いずれもチェックされていないかチェック。（noCheckFlg）
　　・チェックされているものが画像データにあるかチェック。（hitFlg &= [true|false]）
　・検索対象（hitFlg == true）でかつ、いずれかチェックされている（noCheckFlg == false)場合、画像データを表示、そうでない場合は非表示

という感じです。

質問の回答としては、すべてチェックされていなかったら、すべて表示しないロジックになるよう考慮する、です。

投稿2021/08/12 19:42