Javascript 如何获得复选框的正确值而不是空值？

目前，我正在构建一个包含多个过滤器的产品页面。我想在用户选中复选框时获取其值，以便在选中时显示代码。添加了一个console.log来检查它，但只返回一个错误，即它无法读取Null属性。我做错了什么

我的HTML

<h4>Some title</h4>
        <label class="container-filter">15 - 30 min.
                <input type="checkbox" value="15">
                <span class="checkmark"></span>
              </label>
        <label class="container-filter">30 - 60 min.
                <input type="checkbox" value="30">
                <span class="checkmark"></span>
              </label>

---

通过使用

此

引用自身，可以轻松实现：-

var input=document.querySelectorAll（“输入”）；
常量checkedValues={}；
input.forEach（项=>{
item.addEventListener（'change'，function（））{
checkedValues[this.value]=this.checked；
console.log（checkedValues）
});
});
一些标题
15-30分钟。
30-60分钟。
通过使用
此
引用自身，可以轻松实现：-


var input=document.querySelectorAll（“输入”）；
常量checkedValues={}；
input.forEach（项=>{
item.addEventListener（'change'，function（））{
checkedValues[this.value]=this.checked；
console.log（checkedValues）
});
});
一些标题
15-30分钟。
30-60分钟。
很抱歉，让我重新表述一下，我想做的是，当有人勾选复选框时，它还需要返回15或30，以便我可以使用它进行筛选。@PHV我已经更新了代码段，以使用全局对象作为映射来存储所有值及其真/假值。您可以根据需要使用该全局对象。谢谢，伙计，真的很有帮助！抱歉，让我重新表述一下，我想做的是，当有人勾选了复选框时，它还需要返回15或30，以便我可以使用它进行筛选。@PHV我已更新代码段，以使用全局对象作为映射来存储所有值及其真/假值。您可以根据需要使用该全局对象。谢谢，伙计，真的很有帮助！
var input = document.querySelectorAll("input");
inputs.forEach(item => {
    item.addEventListener('change', function() {
    var checkedValue =  document.querySelector('.boardgame:checked').value;
        console.log(checkedValue)
 });
});