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

【问题标题】：How can I get the proper value of my checkbox instead of Null?如何获得复选框的正确值而不是 Null？
【发布时间】：2021-03-07 02:50:46
【问题描述】：

目前我正在构建一个包含多个过滤器的产品页面。我想在用户选中复选框时获取复选框的值，以便在选中时显示我的代码。添加了一个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>

我的 JavaScript

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

【问题讨论】：

标签： javascript html checkbox

【解决方案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>

【讨论】：

对不起，我换个说法，我想做的是，当有人选中复选框时，它还需要返回 15 或 30，以便我可以使用它进行过滤。
@PHV 我已经更新了 sn-p 以使用全局对象作为映射来存储所有值及其真/假值。您可以根据需要使用该全局对象。