I cannot check checkboxes with the Select all button

Question

      <th>
              <a href="#" id="selectAll">Select all</a>
       </th>

I have a table header element here. When I click on Select All, I want the checkbox at the bottom to be ticked.

      <td>
           <div
               class="d-flex align-items-center justify-content-end">
                            <div class="delete-video me-5" style="margin-bottom: 0.25rem">
              <span
                 class="iconify trash"
                 data-icon="material-symbols-light:delete-outline"
                 data-inline="false" ></span>
             </div>
           <div class="form-check">
            <input
                class="form-check-input video-checkbox"
                   type="checkbox"
                   value=""/>
              </div>
         </div>
   </td>

I have a table element here. There is a checkbox inside the table element.

 <script>
    document.addEventListener("DOMContentLoaded", function () {
        const selectAllCheckbox = document.querySelector("#selectAll");

        selectAllCheckbox.addEventListener("click", function () {
            const checkboxes = document.querySelectorAll(".video-checkbox");
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = selectAllCheckbox.checked;
            });

            console.log("All Checkboxes checked.", checkboxes);
            console.log(
                "Select all text worked.",
                selectAllCheckbox.checked
            );
        });
    });
</script>

Here I have a script written to select all checkboxes when selectall is pressed. Both of the codes I wrote to be displayed in the console log are shown. But the checkboxes are not checked.

Answer 1

The const selectAllCheckbox variable contains a list of elements so of course its not gonna do anything. What you can do is define checkbox.checked = !checkbox.checked to reverse the checked condition of the checkbox like so:

    document.addEventListener("DOMContentLoaded", function () {
        const selectAllCheckbox = document.querySelector("#selectAll");

        selectAllCheckbox.addEventListener("click", function () {
            const checkboxes = document.querySelectorAll(".video-checkbox");
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = !checkbox.checked;
            });
        });
    });

<th>
    <a href="#" id="selectAll">Select all</a>
 </th>
 <td>
     <div
         class="d-flex align-items-center justify-content-end">
                      <div class="delete-video me-5" style="margin-bottom: 0.25rem">
        <span
           class="iconify trash"
           data-icon="material-symbols-light:delete-outline"
           data-inline="false" ></span>
       </div>
     <div class="form-check">
      <input
          class="form-check-input video-checkbox"
             type="checkbox"
             value=""/>
        </div>
   </div>
 </td>