当前位置：首页 > JavaScript

js实现反选

2026-03-01 01:24:08JavaScript

实现反选功能

反选功能通常用于多选框或列表项的选择操作，将已选中的项取消选中，未选中的项选中。以下是几种常见的实现方法：

使用原生JavaScript实现复选框反选

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

// 反选函数
function toggleCheckboxes() {
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

表格行反选实现

// 获取表格中所有行
const rows = document.querySelectorAll('table tr');

// 反选表格行
function toggleTableRows() {
  rows.forEach(row => {
    row.classList.toggle('selected');
  });
}

结合Shift键实现范围反选

let lastChecked;

function handleCheckboxClick(e) {
  let inBetween = false;

  if(e.shiftKey && this.checked) {
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');

    checkboxes.forEach(checkbox => {
      if(checkbox === this || checkbox === lastChecked) {
        inBetween = !inBetween;
      }

      if(inBetween) {
        checkbox.checked = !checkbox.checked;
      }
    });
  }

  lastChecked = this;
}

// 为所有复选框添加事件监听
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
  checkbox.addEventListener('click', handleCheckboxClick);
});

使用jQuery实现反选

$('#invertSelection').click(function() {
  $('input[type="checkbox"]').each(function() {
    $(this).prop('checked', !$(this).prop('checked'));
  });
});

针对特定容器内的元素反选

function invertSelection(containerId) {
  const container = document.getElementById(containerId);
  const items = container.querySelectorAll('input[type="checkbox"]');

  items.forEach(item => {
    item.checked = !item.checked;
  });
}

这些方法可以根据具体需求进行调整，适用于不同的场景和UI结构。

js实现反选