チェックボックスoff時に背景色が一部残ってしまう

前提・実現したいこと

checkboxをoffにした時に残ってしまう横長い線を非表示にしたいです。
初心者ながら色々調べて試してみましたが、解決できなかったのでこちらで質問させて頂きました。

該当のソースコード

HTML
1        <form id="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=""><a class="open"></a></li>
41                <li class="list_item list_toggle" data-brand="チワワ" data-size="白色" data-type="大人"><a class="open"><img
42                                src="https://drive.google.com/uc?export=view&id=17yGYCWdiEdCI6xz2BAJN3Q2sQrM71akw"
43                                alt=""></a></li>
44                <li class="list_item list_toggle" data-brand="チワワ" data-size="茶色" data-type="赤ちゃん"><a class="open"><img
45                                src="https://drive.google.com/uc?export=view&id=1KUFSriI2NznjH2oR0NCBZIDNAHU-MHz1"
46                                alt=""></a></li>
47                <li class="list_item list_toggle" data-brand="チワワ" data-size="茶色" data-type="大人"><a class="open"><img
48                                src="https://drive.google.com/uc?export=view&id=131yXqBtOqbHJ0NirmnA0lFbS92HON_kV"
49                                alt=""></a></li>
50                <li class="list_item list_toggle" data-brand="柴犬" data-size="白色" data-type="赤ちゃん"><a class="open"><img
51                                src="https://drive.google.com/uc?export=view&id=13kGzlyG1KNwc0RjVqQ_524FYU3IypC5i"
52                                alt=""></a></li>
53                <li class="list_item list_toggle" data-brand="柴犬" data-size="茶色" data-type="赤ちゃん"><a class="open"><img
54                                src="https://drive.google.com/uc?export=view&id=1XnX7cHGSuGa3DjrkTuLSsvPBC9ZSml21"
55                                alt=""></a></li>
56                <li class="list_item list_toggle" data-brand="柴犬" data-size="茶色" data-type="大人"><a class="open"><img
57                                src="https://drive.google.com/uc?export=view&id=1_3QbN0azReVJ_Q814fwtUn0lGg5PUDbw"
58                                alt=""></a></li>
59                <li class="list_item list_toggle no_list"></li>
60
61        </ul>

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

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

試したこと

普段は非表示にしておいて、各checkboxがクリックされたら『背景色＆画像』を表示するようにしてみようと思い、下記を試してみた結果、非表示は実現できましたが、『背景色＆画像』が表示されなくなってしまいました。(console.logで確認したところクリックの反応はありました。)

CSS
1.list {
2  visibility: hidden;
3  opacity: 0;
4}
5.list:active {
6  visibility: visible;
7  opacity: 1.0;
8・・・
9}
10
11.list li{
12  visibility: hidden;
13  opacity: 0;
14}
15.list li:active {
16  visibility: visible;
17  opacity: 1.0;
18・・・
19}

JavaScript
1window.document.getElementById("form").addEventListener("click",function(){
2    document.querySelector(".list").classList.add("active");
3    document.querySelector(".list li").classList.add("active");
4});

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

回答1件

ベストアンサー

アイテムが0の時はul.listに非表示用のクラスを追加しています。
jsは4列追記しています。

html
1<style>
2.list.is-hide {
3	display: none;
4}
5</style>
6
7<script>
8/**
9 * リストの絞り込みを行う
10 */
11$('ul.list').addClass(hideClass);/*◆◆◆◆◆◆◆◆◆ 追加*/
12function search_filter() {
13	// リスト内の各アイテムをチェック
14	let hasItem = false;/*◆◆◆◆◆◆◆◆◆ 追加*/
15	let noCheckItem = true; // 何れもチェックされていないかチェック
16	for (let j = 0; j < $(listItem).length; j++) { // リストアイテムの数より小さい間
17		let hitItem = true; // 検索対象 
18		for (let i = 0; i < $(searchBox).length; i++) {
19			let name = $(searchBox)
20				.eq(i)
21				.find("input")
22				.attr("name");
23			// 選択されている項目を取得
24			let searchData = get_selected_input_items(name);
25			// 選択されている項目がない、またはALLを選択している場合は飛ばす
26			if (searchData.length === 0 || searchData[0] === "") {
27				hitItem &= true; // 何もチェックされていなかったら検索絞込から外す
28				continue;
29			}
30			noCheckItem = false; // 何れかチェックされている
31			// アイテムに設定している項目を取得
32			let itemData = $(listItem)
33				.eq(j)
34				.data(name);
35			// 絞り込み対象かどうかを調べる
36			hitItem &= (searchData.indexOf(itemData) !== -1)
37		}
38
39		// 各labelをand条件に設定する
40		if (hitItem && !noCheckItem) {
41			$(listItem)
42				.eq(j)
43				.removeClass(hideClass);
44			hasItem = true;/*◆◆◆◆◆◆◆◆◆ 追加*/
45		} else {
46			$(listItem)
47				.eq(j)
48				.addClass(hideClass);
49		}
50	}
51	$('ul.list').toggleClass(hideClass, !hasItem);/*◆◆◆◆◆◆◆◆◆ 追加*/
52}
53</script>

投稿2021/08/20 14:44

webgoto

総合スコア1293

yyyyyyyyyyy

2021/08/20 16:29 編集

ご回答頂きありがとうございます。ご教示いただいた通り修正を加えてみたのですが、やはり横棒線は消えないように感じます。疑問点が伝わりづらかったかと思いましたので、画像を追記したのでお手数ですがご確認いただけたら幸いです。(上画像内のピンクの横線を非表示にしたいです。画像上はcheckbox非選択時、画像下はcheckbox選択時)