jsでフィルタリング機能を作成しているのですがcheckボタンを押下するとすべて非表示になってしまいます。
Q&A
Closed
解決したいこと
現在pythonのflaskを用いてHP作成をおこなっており、
DBから取得してきた情報を一覧表示するプログラムを作成していて、
追加機能としてjsでフィルタリング（絞り込み）機能を実装したいと考えております。
コードを組んでいるのですがうまく動作せず、作業が止まってしまっています。
発生している問題・エラー
checkboxを押下したら地方ごとに絞り込みを行いたいのですが、
checkboxを押下するとすべての項目が非表示になってしまいます。
.html
<div id="filter">
<h2>地域別情報</h2>
<div class="select">
<label for="tohoku_area">東北地方<input type="checkbox" name="area_filter" id="tohoku_area" class="filter" value="東北地方"></label>
<label for="kanto_area">関東地方<input type="checkbox" name="area_filter" id="kanto_area" class="filter" value="関東地方"></label>
<label for="hokuriku_chubu_area">北陸・中部地方<input type="checkbox" name="area_filter" id="hokuriku_chubu_area" class="filter" value="北陸・中部地方"></label>
<label for="kinki_area">近畿地方<input type="checkbox" name="area_filter" id="kinki_area" class="filter" value="近畿地方"></label>
<label for="chugoku_sikoku_area">中国・四国地方<input type="checkbox" name="area_filter" id="chugoku_sikoku_area" class="filter" value="中国・四国地方"></label>
<label for="kyushu_area">九州地方<input type="checkbox" name="area_filter" id="kyushu_area" class="filter" value="九州地方"></label>
</div>
<div>
{% if items.get("typeA_items") %}
{% for typeA_item in premium_items.get("typeA_items") %}
<div class="typeA">
<div class="flex_icon">
<img src="{{ url_for('static', filename='images/typeA.png') }}"
alt="typeA">
</div>
<div class="flex_text">
<dl>
<dt class="ItemTitle">日時</dt>
<dd class="ItemDescription">{{typeA_item[3]}}</dd>
</dl>
<dl class="filter_target">
<dt class="ItemTitle">場所</dt>
// ※typeA_item[4]にチェックボックスと同じ値の地方名が格納されている個所です。
// ※typeA_item[5]に県名が格納されています。
<dd class="ItemDescription" filter="{{typeA_item[4]}}">{{typeA_item[5]}}</dd>
</dl>
<dl>
<dt class="ItemTitle">住所</dt>
<dd class="ItemDescription">{{typeA_item[6]}}</dd>
</dl>
</div>
<div class="flex_link">
<li><a href="{{typeA_item[7]}}">情報詳細</a></li>
</div>
</div>
{% endfor %}
{% else %}
<div class="typeA_nothing">
<p>開催が見つかりませんでした</p>
</div>
{% endif %}
</div>
</div>
.js
document.addEventListener('DOMContentLoaded', function () {
var filterContainer = document.getElementById('filter');
var checkboxes = filterContainer.querySelectorAll('.select input[type="checkbox"]');
var premiumItems = filterContainer.querySelectorAll('.typeA');
var applyFilter = function () {
var checkedValues = Array.from(checkboxes)
.filter(function (checkbox) { return checkbox.checked; })
.map(function (checkbox) { return checkbox.value; });
premiumItems.forEach(function (item) {
var itemRegion = item.querySelector('.ItemDescription').getAttribute('filter');
if (checkedValues.includes(itemRegion)) {
item.style.display = ''; // 選択された地域に対応する要素を表示
} else {
item.style.display = 'none'; // それ以外の要素を非表示
}
});
// 何もチェックされていない場合は全ての要素を表示する
if (checkedValues.length === 0) {
premiumItems.forEach(function (item) {
item.style.display = '';
});
}
};
checkboxes.forEach(function (checkbox) {
checkbox.addEventListener('change', applyFilter);
});
});
最後まで読んでいただきありがとうございます
何かわかる方いらっしゃいましたら教えていただけると幸いです。
何卒よろしくお願いします。
0
