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

Question

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

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

我有一个按钮，单击它会 select 页面上的所有复选框，然后取消 select 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;
}

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

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 复选框，然后用户 select 有一个订阅电子邮件的复选框，我想取消 select unsubscribeAll 复选框，但我正在努力实现这一目标. 我想我可以运行另一个函数，它会取消 select 那个复选框，像这样；

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 请给我一些指导。

Answer 1

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

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

How can I remove the last checkbox from an array using vanilla javascript

javascript

forms

arrays

checkbox