点击Select All按钮无法勾选checkbox问题求助

你的代码核心问题在于：用于触发全选的是<a>标签，而非<input type="checkbox">，所以它根本没有checked属性。你在脚本中尝试将子checkbox的checked状态赋值为selectAllCheckbox.checked，但这个值始终是undefined，导致checkbox不会被勾选。另外，<a>标签默认的跳转行为（即使href="#")也可能干扰逻辑执行。

修复步骤 #

1. 阻止<a>标签的默认行为 #

在点击事件中添加event.preventDefault()，避免页面滚动或跳转干扰逻辑。

2. 维护全选状态 #

通过变量跟踪当前全选状态，每次点击切换状态，再同步到所有子checkbox上。

修改后的完整脚本 #

document.addEventListener("DOMContentLoaded", function () {
    const selectAllLink = document.querySelector("#selectAll");
    // 初始化全选状态为未勾选
    let isAllSelected = false;

    selectAllLink.addEventListener("click", function (event) {
        // 阻止a标签默认跳转行为
        event.preventDefault();
        
        const checkboxes = document.querySelectorAll(".video-checkbox");
        // 切换全选状态
        isAllSelected = !isAllSelected;
        
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = isAllSelected;
        });

        // 可选：切换按钮文本，提升用户体验
        selectAllLink.textContent = isAllSelected ? "Unselect all" : "Select all";
        
        console.log("All Checkboxes checked status:", isAllSelected);
    });
});

可选优化：同步单个checkbox状态 #

如果希望点击单个checkbox时，自动更新全选按钮的文本状态，可以额外添加监听：

// 监听单个checkbox变化，同步全选按钮状态
const checkboxes = document.querySelectorAll(".video-checkbox");
checkboxes.forEach(checkbox => {
    checkbox.addEventListener("change", function() {
        const allChecked = Array.from(checkboxes).every(cb => cb.checked);
        isAllSelected = allChecked;
        selectAllLink.textContent = allChecked ? "Unselect all" : "Select all";
    });
});

关键说明 #

• 不再依赖<a>标签的checked属性，改用独立变量isAllSelected跟踪全选状态
• 阻止默认行为确保逻辑完整执行
• 可选的文本切换让用户更直观感知当前状态

内容的提问来源于stack exchange，提问作者ckot234