js 全选按钮删除选中

基础概念

在JavaScript中，全选按钮通常用于批量操作，例如批量删除、批量编辑等。全选按钮的功能是选中页面上所有符合条件的元素，而删除选中则是将选中的元素从列表中移除。

类型与应用场景

类型：全选按钮通常是一个复选框，用户勾选后，页面上所有相关的复选框都会被选中。
应用场景：常见于邮件客户端、任务管理工具、文件管理器等需要批量操作的场景。

示例代码

以下是一个简单的示例，展示了如何实现全选按钮和删除选中的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选与删除示例</title>
</head>
<body>
    <input type="checkbox" id="selectAll"> 全选
    <ul id="itemList">
        <li><input type="checkbox" class="itemCheckbox"> 项目1</li>
        <li><input type="checkbox" class="itemCheckbox"> 项目2</li>
        <li><input type="checkbox" class="itemCheckbox"> 项目3</li>
    </ul>
    <button onclick="deleteSelected()">删除选中</button>

    <script>
        document.getElementById('selectAll').addEventListener('change', function() {
            const checkboxes = document.querySelectorAll('.itemCheckbox');
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });

        function deleteSelected() {
            const list = document.getElementById('itemList');
            const checkboxes = document.querySelectorAll('.itemCheckbox:checked');
            checkboxes.forEach(checkbox => {
                checkbox.parentElement.remove();
            });
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：全选按钮选中后，删除选中项目时，全选按钮状态未更新

原因：删除项目后，全选按钮的状态没有重新计算。

解决方法：在删除选中项目后，手动更新全选按钮的状态。

function deleteSelected() {
    const list = document.getElementById('itemList');
    const checkboxes = document.querySelectorAll('.itemCheckbox:checked');
    checkboxes.forEach(checkbox => {
        checkbox.parentElement.remove();
    });
    updateSelectAll();
}

function updateSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.itemCheckbox');
    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
    selectAll.checked = allChecked;
}

问题2：动态添加新项目后，全选功能失效

原因：新添加的项目没有被包含在全选的逻辑中。

解决方法：在新项目添加完成后，重新绑定全选事件。

function addItem(text) {
    const list = document.getElementById('itemList');
    const li = document.createElement('li');
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.className = 'itemCheckbox';
    li.appendChild(checkbox);
    li.appendChild(document.createTextNode(text));
    list.appendChild(li);
    updateSelectAll();
}

通过以上方法，可以有效解决全选按钮和删除选中功能中常见的问题。