JavaScript实现页面全选功能详解

惠赢的

于 2025-03-29 10:30:48 发布

阅读量254

点赞数 1

文章标签： javascript 前端 java

本文链接：https://blog.youkuaiyun.com/QQ1257871322/article/details/146641120

版权

一、基础场景与实现原理

典型应用场景

表格批量操作
购物车商品全选
邮件列表管理
批量文件操作

核心实现逻辑

全选框与子选框的关联绑定
双向状态同步机制
动态数据更新处理

二、HTML基础结构

<!-- 全选控制器 -->
<div class="select-control">
  <input type="checkbox" id="selectAll"> 全选/取消
</div>

<!-- 数据列表 -->
<ul class="item-list">
  <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>

三、JavaScript核心实现

1. 元素获取

const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.itemCheckbox');

2. 全选功能实现

// 全选框点击事件
selectAll.addEventListener('click', function() {
  const isChecked = this.checked;
  checkboxes.forEach(checkbox => {
    checkbox.checked = isChecked;
  });
});

// 子选框点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 检测是否全部选中
    const allChecked = [...checkboxes].every(c => c.checked);
    // 检测是否有选中项
    const anyChecked = [...checkboxes].some(c => c.checked);
    
    selectAll.checked = allChecked;
    selectAll.indeterminate = !allChecked && anyChecked;
  });
});

四、增强功能实现

1. 中间态显示

// 设置indeterminate属性显示半选状态
selectAll.indeterminate = !allChecked && anyChecked;

2. 动态数据支持

// 监听DOM变化
const observer = new MutationObserver(mutations => {
  checkboxes = document.querySelectorAll('.itemCheckbox');
});

observer.observe(document.body, { childList: true, subtree: true });

3. 性能优化

// 使用事件委托
document.querySelector('.item-list').addEventListener('click', e => {
  if(e.target.classList.contains('itemCheckbox')) {
    // 处理逻辑
  }
});

五、完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .indeterminate { background: #ddd; }
  </style>
</head>
<body>
  <div class="control">
    <input type="checkbox" id="selectAll"> 全选
    <span id="count">已选0项</span>
  </div>

  <div class="list">
    <div><input type="checkbox" class="item"> 选项A</div>
    <div><input type="checkbox" class="item"> 选项B</div>
    <div><input type="checkbox" class="item"> 选项C</div>
  </div>

  <script>
    const selectAll = document.getElementById('selectAll');
    let items = document.querySelectorAll('.item');

    // 全选控制
    selectAll.addEventListener('change', function() {
      items.forEach(item => item.checked = this.checked);
      updateCount();
    });

    // 子项控制
    document.querySelector('.list').addEventListener('change', e => {
      if(!e.target.classList.contains('item')) return;
      
      const allChecked = [...items].every(i => i.checked);
      const anyChecked = [...items].some(i => i.checked);
      
      selectAll.checked = allChecked;
      selectAll.indeterminate = !allChecked && anyChecked;
      updateCount();
    });

    // 更新计数器
    function updateCount() {
      const count = [...items].filter(i => i.checked).length;
      document.getElementById('count').textContent = `已选${count}项`;
    }
  </script>
</body>
</html>

通过本文的实现方案，可以构建出健壮的全选功能系统。核心要点在于保持状态同步的准确性和处理动态内容的灵活性，开发者可根据具体业务需求进行功能扩展和优化