When using PHP to generate HTML checkboxes, how can the selection of all checkboxes be implemented efficiently using JavaScript?

When generating HTML checkboxes using PHP, it can be useful to have a "Select All" checkbox that allows users to easily select or deselect all checkboxes at once. This can be implemented efficiently using JavaScript by adding an event listener to the "Select All" checkbox that loops through all checkboxes and updates their checked status accordingly. 

<?php
// Generate HTML checkboxes
$checkboxes = array("checkbox1", "checkbox2", "checkbox3");

foreach ($checkboxes as $checkbox) {
    echo "<input type='checkbox' name='$checkbox'>$checkbox<br>";
}
?>

<script>
// Get the "Select All" checkbox element
const selectAll = document.querySelector("#select-all");

// Get all checkboxes
const checkboxes = document.querySelectorAll("input[type='checkbox']");

// Add event listener to "Select All" checkbox
selectAll.addEventListener("change", function() {
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
});
</script>

<input type="checkbox" id="select-all">Select All

Keywords

PHP HTML checkboxes JavaScript selection efficiency

Related Questions