页面table行中checkbox全选与表头选中同步

2023-12-09 04:47:49

实现步骤

HTML标记

首先，你需要在HTML中创建一个table元素，其中包含要实现全选功能的checkbox。确保在table表头中包含一个id为“checkAll”的单选框，以便通过JavaScript来控制其选中状态。

JavaScript代码

接下来，你需要编写JavaScript代码来实现全选功能。你可以使用jQuery来简化代码，使其更易于理解和维护。以下是实现全选功能的JavaScript代码：

// 首先，获取table中所有checkbox的元素
var checkboxes = document.querySelectorAll("input[type=checkbox]");

// 监听每个checkbox的点击事件
checkboxes.forEach((checkbox) => {
    checkbox.addEventListener("click", function() {
        // 获取table中选中的checkbox的数量
        var checkedCount = document.querySelectorAll("input[type=checkbox]:checked").length;

        // 获取表头checkbox元素
        var checkAll = document.getElementById("checkAll");

        // 如果选中的checkbox的数量等于table的总行数，则将表头checkbox置为选中，否则置为未选中
        if (checkedCount === checkboxes.length) {
            checkAll.checked = true;
        } else {
            checkAll.checked = false;
        }
    });
});