jsでチェックボックスを押下時に絞り込みを行う機能を追加したいが動作がうまくいかない。

<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>

document.addEventListener('DOMContentLoaded', function () {
    var filterContainer = document.getElementById('filter');
    var checkboxes = filterContainer.querySelectorAll('.select input[type="checkbox"]');
    var filterTargets = filterContainer.querySelectorAll('.filter_target dd');

    var applyFilter = function () {
        var checkedValues = Array.from(checkboxes)
            .filter(function (checkbox) { return checkbox.checked; })
            .map(function (checkbox) { return checkbox.value; });

        filterTargets.forEach(function (target) {
            var filterValue = target.getAttribute('filter');
            if (checkedValues.includes(filterValue) || checkedValues.length === 0) {
                target.parentElement.style.display = ''; // 要素を表示
            } else {
                target.parentElement.style.display = 'none'; // 要素を非表示
            }
        });
    };

    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', applyFilter);
    });
});

    <div id="js-filter">
        <div class="filter-cond">
            <label><input type="checkbox" value="貝類">貝類</label>
            <label><input type="checkbox" value="光物">光物</label>
            <label><input type="checkbox" value="白身">白身</label>
            <label><input type="checkbox" value="赤身">赤身</label>
        </div>
    
        <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>
        </ul>
    </div>

document.addEventListener('DOMContentLoaded', function () {
    var widget = document.getElementById('js-filter');
    var checkboxes = widget.querySelectorAll('.filter-cond input[type="checkbox"]');
    var items = widget.querySelectorAll('.filter-items li');
    
    var filter = function () {
        var checkedList = [];
        
        // チェックされたチェックボックスの値を取得
        checkboxes.forEach(function (checkbox) {
            if (checkbox.checked) {
                checkedList.push(checkbox.value);
            }
        });
        
        // 全ての項目を一旦非表示にする
        items.forEach(function (item) {
            item.style.display = 'none';
        });
        
        // チェックされたカテゴリーに該当する項目のみを表示する
        if (checkedList.length > 0) {
            checkedList.forEach(function (filterValue) {
                items.forEach(function (item) {
                    if (item.getAttribute('data-filter-key') === filterValue) {
                        item.style.display = 'block'; // または 'list-item'
                    }
                });
            });
        } else {
            // 何もチェックされていない場合は全ての項目を表示する
            items.forEach(function (item) {
                item.style.display = 'block'; // または 'list-item'
            });
        }
    };
    
    // チェックボックスの状態が変わったらfilter関数を呼び出す
    checkboxes.forEach(function (checkbox) {
        checkbox.addEventListener('change', filter);
    });
});