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

Question

这是一个带有一堆复选框(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请给我指路。

Answer 1

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