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

Question

我是一名在学校学习编程课程 (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 语句的其他部分还没有。）

Answer 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 保留在函数之外，否则每次复选框 checked/un-checked 时它都会被初始化为空，从而触发 onchange 处理程序。当您在不包含属性的 HTMLCollection 对象上访问 'value' 属性时，您变得不确定。在 MDN

上阅读更多相关信息

Answer 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);
        }

你的逻辑有 2 个错误：

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

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

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

中过滤掉复选框的值

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

How do I retrieve values from checkboxes in JavaScript, using onchange to trigger a function?

javascript

checkbox

function

onchange