当前位置：首页 > JavaScript

js实现表单全选

2026-02-03 05:51:52JavaScript

实现表单全选功能

在JavaScript中实现表单全选功能，通常涉及监听全选复选框的点击事件，并根据其状态设置其他复选框的选中状态。

HTML结构示例

<input type="checkbox" id="selectAll"> 全选
<div class="item-list">
  <input type="checkbox" class="item"> 选项1
  <input type="checkbox" class="item"> 选项2
  <input type="checkbox" class="item"> 选项3
</div>

JavaScript实现

// 获取全选复选框和所有项目复选框
const selectAll = document.getElementById('selectAll');
const items = document.querySelectorAll('.item');

// 监听全选复选框的点击事件
selectAll.addEventListener('click', function() {
  items.forEach(item => {
    item.checked = this.checked;
  });
});

// 监听项目复选框的变化，更新全选状态
items.forEach(item => {
  item.addEventListener('change', function() {
    const allChecked = [...items].every(item => item.checked);
    selectAll.checked = allChecked;
  });
});

实现反选功能

如果需要实现反选功能，可以添加以下代码：

const invertBtn = document.getElementById('invertSelection');
invertBtn.addEventListener('click', function() {
  items.forEach(item => {
    item.checked = !item.checked;
  });
  updateSelectAllState();
});

function updateSelectAllState() {
  const allChecked = [...items].every(item => item.checked);
  selectAll.checked = allChecked;
}

使用事件委托优化性能

对于大量复选框的情况，可以使用事件委托来优化性能：

js实现表单全选

document.querySelector('.item-list').addEventListener('change', function(e) {
  if(e.target.classList.contains('item')) {
    const allChecked = [...items].every(item => item.checked);
    selectAll.checked = allChecked;
  }
});