当前位置：首页 > JavaScript

js 多选实现

2026-04-03 22:58:05JavaScript

实现多选功能的方法

使用 JavaScript 实现多选功能通常涉及监听用户操作（如点击或键盘事件），并动态更新选中状态。以下是几种常见的实现方式：

基于复选框的多选 通过复选框（<input type="checkbox">）实现多选是最直接的方式。通过遍历复选框组，获取选中的值：

js 多选实现

// 获取所有复选框
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// 监听复选框变化
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    if (this.checked) {
      console.log('选中:', this.value);
    }
  });
});

基于列表项的多选 通过点击列表项切换选中状态，通常配合 CSS 高亮显示选中项：

const items = document.querySelectorAll('.selectable-item');

items.forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('selected'); // 切换选中样式
  });
});

配合键盘的多选（Shift 多选） 允许用户通过按住 Shift 键进行范围多选：

js 多选实现

let lastSelectedIndex = -1;

document.querySelectorAll('.item').forEach((item, index) => {
  item.addEventListener('click', function(e) {
    if (e.shiftKey && lastSelectedIndex !== -1) {
      // 处理范围选择逻辑
      const start = Math.min(index, lastSelectedIndex);
      const end = Math.max(index, lastSelectedIndex);
      for (let i = start; i <= end; i++) {
        items[i].classList.add('selected');
      }
    }
    lastSelectedIndex = index;
  });
});

状态管理与数据绑定

将选中状态与数据模型绑定，便于后续操作：

const selectedItems = [];

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    const itemId = this.dataset.id;
    const index = selectedItems.indexOf(itemId);

    if (index === -1) {
      selectedItems.push(itemId); // 添加选中项
    } else {
      selectedItems.splice(index, 1); // 移除选中项
    }
    console.log('当前选中:', selectedItems);
  });
});

全选/反选功能

添加全选或反选按钮提升操作效率：

document.getElementById('select-all').addEventListener('click', function() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = true;
  });
});