如何从 JavaScript 中的复选框中检索值，使用 onchange 触发函数？答案

【问题标题】：How do I retrieve values from checkboxes in JavaScript, using onchange to trigger a function?如何从 JavaScript 中的复选框中检索值，使用 onchange 触发函数？
【发布时间】：2018-12-01 18:12:53
【问题描述】：

我是一名高中生，在学校学习编程课程 (JavaScript)。我们刚刚进行了一次测试（我不幸失败了），但我们可以再试一次。

我有几个复选框。它们都有一个 onchange，稍后会触发一个函数。当我点击复选框时，我想检索它们的值。

我在这里浏览了一下，看到了一个叫做 jQuery 的东西。我不知道那是什么，所以我非常感谢在纯 JavaScript 方面获得我的帮助。

好的，这就是我的代码。注意：一些变量等是挪威语。我不认为这应该是一个问题，因为我显示了对所有的引用。

我的输入（复选框）：

<input type="checkbox" class="tur" value="0" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="1" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="2" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="3" onchange="funcSjekkBoks(this)">
<input type="checkbox" class="tur" value="4" onchange="funcSjekkBoks(this)">

我只需要它们的值是数字，因为我将使用它们来引用我稍后拥有的数组列表。

这是我的功能：

var inputTur = document.getElementsByClassName("tur");
console.log(inputTur);

    function funcSjekkBoks(checkboxEl) {
        var resultatListe = [];
        if (checkboxEl.checked) {
            resultatListe.push(inputTur.value);
            console.log(resultatListe);
        }
        else {
            console.log("usant")
        }
    }

我希望发生的事情（如果所有复选框都从上到下选中）：

resultatListe = [0, 1, 2, 3, 4]
当我取消选中一个复选框时，它的值将从数组中删除。

这是目前发生的情况：
当我选中一个复选框时，我在控制台中得到[undefined]，当我取消选中一个复选框时，我得到usant（虽然这是预期的响应，但我还没有使用我的if语句的else部分。）

【问题讨论】：

标签： javascript function checkbox onchange

【解决方案1】：

以下代码将为您工作：

var resultatListe = [];
function funcSjekkBoks(checkboxEl) {
    var value = parseInt(checkboxEl.value);
    if (checkboxEl.checked) {
        resultatListe.push(value);
        console.log(resultatListe);
    }
    else {
        console.log("usant");
        var indexToRemove = resultatListe.indexOf(value);
        resultatListe.splice(indexToRemove,1);
    }
}

您需要将数组resultatListe 保留在函数之外，否则每次选中/取消选中复选框时它将被初始化为空，从而触发 onchange 处理程序。当您访问不包含该属性的 HTMLCollection 对象上的“值”属性时，您得到了未定义。在MDN 上阅读更多相关信息

【讨论】：

【解决方案2】：

var inputTur = document.getElementsByClassName("tur");
var resultatListe = [];
console.log(inputTur);

        function funcSjekkBoks(checkboxEl) {

            if (checkboxEl.checked) {
                resultatListe.push(parseInt(checkboxEl.value));
            }
            else {
                resultatListe = resultatListe.filter(d => d != checkboxEl.value)
            }
            console.log(resultatListe);
        }

你的逻辑有两个错误：

1) 你需要在函数外部定义resultatListe，这样它就不会每次都被初始化为一个空数组

2) 在您的代码中resultatListe.push(inputTur.value); inputTur 是复选框的 HTMLCollection，而您需要单个复选框。

对于 else 逻辑，如果每个复选框的值都是唯一的，您可以使用array.prototype.filter 方法从resultatListe 中过滤掉复选框的值

【讨论】：