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

Question

目前我正在构建一个包含多个过滤器的产品页面。我想在用户选中时获取我的复选框的值，以便在选中时显示我的代码。添加了一个 console.log 来检查它，但只有 returns 它无法读取 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>

我的Javascript

var input = document.querySelectorAll("input");
inputs.forEach(item => {
    item.addEventListener('change', function() {
    var checkedValue =  document.querySelector('.boardgame:checked').value;
        console.log(checkedValue)
 });
});

Answer 1

通过使用 this 引用本身很容易做到：-

var input = document.querySelectorAll("input");
const checkedValues = {};
input.forEach(item => {
    item.addEventListener('change', function() {
    checkedValues[this.value] = this.checked;
    console.log(checkedValues)
 });
});

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

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

How can I get the proper value of my checkbox instead of Null?

html

javascript

checkbox