时间戳

首页 > 解决方案 > 如何使用 vanilla javascript 从数组中删除最后一个复选框

javascript - 如何使用 vanilla javascript 从数组中删除最后一个复选框

问题描述

这是一个电子邮件首选项表单，带有一堆复选框 (16) 以允许用户订阅/取消订阅。我有一组这样的复选框；

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

我有一个按钮，单击该按钮将选中页面上的所有复选框，然后取消选择 unsubscribeAll 复选框；

getAllButton.addEventListener("click", function () {
    selectAll();
});

function selectAll() {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == "checkbox") checkboxes[i].checked = true;
    }

    // un-check the unsubscribeAll checkbox
    unsubscribeAll.checked = false;
}

我有一个复选框，单击（选中）将取消选择页面上的所有其他复选框；

var unsubscribeAll = document.getElementById("unsubscribeAll");

unsubscribeAll.addEventListener("click", function () {
    // un-check this box if already checked
    if (this.checked !== true) {
        this.checked = false;
    } else {
        deselectAll();
    }
});

function deselectAll() {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].type == "checkbox") checkboxes[i].checked = false;
    }
    unsubscribeAll.checked = true;
}

这一切都完美无缺。但是，我的问题是，如果选中了 unsubscribeAll 复选框，然后用户选择了一个复选框来订阅电子邮件，我想取消选择 unsubscribeAll 复选框，但我正在努力做到这一点。我以为我可以运行另一个函数来取消选择这样的复选框；

for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", deselectUnsubscribeAll);
}

function deselectUnsubscribeAll() {
    if (unsubscribeAll.checked === true) {
        unsubscribeAll.checked = false;
    }
}

当然，这不起作用，因为unsubscribeAll它包含在checkboxes[]数组中。接下来，我认为我将能够创建一个新的复选框数组，unsubscribeAll因此我尝试了这个，因为它是该数组中的最后一个元素；

var unsubscribeAll = document.getElementById("unsubscribeAll");
var getAllButton = document.getElementById("select-all");
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
console.log(checkboxes.length); // 16
var popped = checkboxes.pop(); // Uncaught TypeError: checkboxes.pop is not a function

如您所见，这会产生错误，但我不明白为什么。这看起来像笨重的代码，但它几乎可以工作。这是我用来解决问题的页面之一； https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop#examples 我需要一些指导。

标签： javascriptarraysformscheckbox

解决方案

您说它是该数组中的最后一个元素，那么为什么要循环遍历数组的末尾而不使用for (var i = 0; i < checkboxes.length - 1; i++)呢？
然后你可以单独添加一个事件监听器。
您还可以使用Element.matches() API 检查单击的复选框是否unsubscribeAll并相应地运行适当的函数。但是第一种方法更有效，因为您不需要在每个点击事件上检查元素。

推荐阅读