我无法使用“全选”按钮选中复选框

Question

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

我这里有一个表格元素。表格元素内有一个复选框。

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

这里我编写了一个脚本，用于在按下 selectall 时选择所有复选框。显示了我编写的要在控制台日志中显示的两个代码。但复选框没有被选中。

Answer 1

const selectAllCheckbox

变量包含一个元素列表，所以它当然不会做任何事情。您可以做的是定义

checkbox.checked = !checkbox.checked

来反转复选框的选中状态，如下所示：

    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>