当前位置：首页 > JavaScript

js实现反选

2026-01-30 10:20:24JavaScript

实现反选功能的方法

反选功能通常用于复选框（checkbox）操作，即选中当前未选中的项，取消选中已选中的项。以下是几种实现方式：

使用纯JavaScript实现

通过遍历所有复选框并切换其选中状态：

js实现反选

function toggleCheckboxes() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

针对特定容器内的复选框

如果只需要反选特定容器内的复选框：

function toggleContainerCheckboxes(containerId) {
  const container = document.getElementById(containerId);
  const checkboxes = container.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

结合事件监听实现

为反选按钮添加点击事件：

js实现反选

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

使用数据属性实现更精细控制

通过data-属性标记需要反选的复选框：

function toggleSelectedCheckboxes() {
  const checkboxes = document.querySelectorAll('[data-toggle-group="group1"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = !checkbox.checked;
  });
}

保留某些特殊复选框不被反选

添加条件判断来排除特定复选框：

function toggleExcludingSome() {
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    if (!checkbox.classList.contains('no-toggle')) {
      checkbox.checked = !checkbox.checked;
    }
  });
}