mercredi 11 août 2021

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

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.




Aucun commentaire:

Enregistrer un commentaire