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

Question

This is an email preferences form with a bunch of checkboxes (16) to allow users to subscribe/unsubscribe. I have a collection of checkboxes like this;

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

I have a button which when clicked will select all checkboxes on the page and then deselect the unsubscribeAll checkbox;

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

I have a checkbox which when clicked(checked) will deselect all of the other checkboxes on the page;

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

This is all working perfectly. However, my problem is that if the the unsubscribeAll checkbox is checked and the user then selects a checkbox to subscribe to an email I want to deselect the unsubscribeAll checkbox but I'm struggling to make that happen. I thought I would be able to run another function that would deselect that checkbox like this;

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

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

Of course, this doesn't work because unsubscribeAll is included in the checkboxes[] array. Next, I thought I would be able to create a new array of checkboxes that excluded unsubscribeAll so I tried this because it's the last element in that array;

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

As you can see, that generates an error but I don't understand why. This seems like clunky code but it almost works. This is one of the pages that I referenced to solve my problem; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop#examples I need some direction please.

user_8488702 · Answer

You say it's the last element in that array, so why do you loop through the end of array and not using for (var i = 0; i < checkboxes.length - 1; i++)?
And then you can add an event listener separately to that.
You can also use Element.matches() API to check if the clicked checkbox is unsubscribeAll and run appropriate functions accordingly. But the first method is more efficient cause you don't need to check for the element on each click event.

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

1 Answers