当前位置：首页 > JavaScript

js实现全部

2026-03-14 21:45:41JavaScript

实现 JavaScript 全选功能的方法

方法一：使用复选框控制全选 通过监听全选复选框的点击事件，动态设置其他复选框的选中状态。

document.getElementById('selectAll').addEventListener('click', function() {
  const checkboxes = document.querySelectorAll('.item-checkbox');
  checkboxes.forEach(checkbox => {
    checkbox.checked = this.checked;
  });
});

方法二：通过按钮触发全选 创建一个按钮元素，点击时将所有目标元素的选中属性设置为 true。

js实现全部

document.getElementById('selectAllBtn').addEventListener('click', function() {
  const items = document.getElementsByName('selectItem');
  for (let item of items) {
    item.checked = true;
  }
});

方法三：使用事件委托优化性能 对于动态生成的列表，在父元素上使用事件委托来处理全选逻辑。

document.querySelector('.container').addEventListener('click', function(e) {
  if (e.target.id === 'selectAll') {
    const checkboxes = this.querySelectorAll('.item-checkbox');
    checkboxes.forEach(checkbox => {
      checkbox.checked = e.target.checked;
    });
  }
});

方法四：表格行全选实现 针对表格场景的特殊处理，确保只选中有效行。

js实现全部

function selectAllTableRows() {
  const table = document.getElementById('dataTable');
  const checkboxes = table.querySelectorAll('input[type="checkbox"]:not(:disabled)');
  const selectAll = document.getElementById('selectAllRows');

  checkboxes.forEach(checkbox => {
    checkbox.checked = selectAll.checked;
  });
}

方法五：带反选功能的实现 扩展功能，允许在全选和取消全选之间切换。

let allSelected = false;
document.getElementById('toggleSelect').addEventListener('click', function() {
  const elements = document.querySelectorAll('.selectable');
  allSelected = !allSelected;
  elements.forEach(el => {
    el.checked = allSelected;
  });
  this.textContent = allSelected ? '取消全选' : '全选';
});

注意事项

确保为所有相关元素添加正确的类名或属性选择器
考虑性能因素，避免在大型列表中使用频繁的DOM操作
对于动态加载的内容，需要使用事件委托或重新绑定事件
无障碍访问方面，确保为全选控件添加适当的ARIA属性

兼容性处理

对于老版本浏览器，可能需要使用传统的事件绑定方式：

var selectAll = document.getElementById('selectAll');
if (selectAll.addEventListener) {
  selectAll.addEventListener('click', selectAllHandler);
} else {
  selectAll.attachEvent('onclick', selectAllHandler);
}

function selectAllHandler() {
  var checkboxes = document.getElementsByClassName('item-checkbox');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
}