JavaScript 全选/全不选功能实现详解及进阶技巧100

在网页开发中，经常会遇到需要对列表中的所有项目进行全选或全不选的操作。例如，在电商网站的购物车页面，用户可能需要一键选择所有商品；在后台管理系统中，用户可能需要批量操作多个记录。实现这种全选/全不选功能，JavaScript 提供了多种便捷的方法。本文将深入探讨 JavaScript 中实现全选/全不选功能的多种技巧，并分析其优缺点，帮助你选择最合适的方案。

最简单直接的方法是使用一个 checkbox 来控制所有其他 checkbox 的选中状态。核心思想是：主 checkbox 的选中状态直接决定所有子 checkbox 的选中状态。我们可以通过 JavaScript 的 `checked` 属性来控制 checkbox 的选中状态。以下是一个简单的例子：```javascript
全选

项目1

项目2

项目3

const selectAll = ('selectAll');
const items = ('input[name="item"]');
('change', () => {
(item => {
= ;
});
});
(item => {
('change', () => {
= (items).every(item => );
});
});

```

这段代码首先获取 “全选” checkbox 和所有项目 checkbox 的元素。然后，为 “全选” checkbox 添加 `change` 事件监听器，当它的选中状态改变时，遍历所有项目 checkbox 并将其选中状态设置为与 “全选” checkbox 一致。同时，也为每个项目 checkbox 添加 `change` 事件监听器，当某个项目 checkbox 的选中状态改变时，判断是否所有项目 checkbox 都被选中，并更新 “全选” checkbox 的选中状态。这确保了 “全选” checkbox 的状态始终与项目 checkbox 的选中状态同步。

这种方法简单易懂，适用于简单的全选/全不选场景。然而，如果项目数量非常多，频繁地遍历和修改 DOM 元素可能会影响性能。对于大型列表，我们可以考虑使用更优化的方案。

进阶技巧：使用事件委托

事件委托可以提高性能，尤其是在处理大量元素的事件时。我们可以将事件监听器添加到父元素上，然后根据事件目标来判断哪个元素被触发了事件。以下是如何使用事件委托实现全选/全不选功能的示例：```javascript

全选

项目1

项目2

项目3

const container = ('container');
const selectAll = ('selectAll');
('change', (event) => {
if ( === 'selectAll') {
('input[name="item"]').forEach(item => {
= ;
});
} else if ( === 'item') {
= ('input[name="item"]').every(item => );
}
});