自在畅游代码海洋—— 复选框功能轻松实现，精通前端开发

2023-10-16 02:37:47

巧用原生 JavaScript 实现复选框全选、全不选与反选功能

简介

复选框是网页表单中常见的元素，用户可通过复选框进行多选操作。在某些场景下，实现复选框的全选、全不选和反选功能至关重要，本文将手把手教你如何使用原生 JavaScript 实现这些功能。

准备工作

首先，在 HTML 页面中创建一组复选框，并为每个复选框分配一个唯一的 ID。

<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<input type="checkbox" id="check3">

然后，在 JavaScript 文件中获取所有复选框元素：

const checks = document.querySelectorAll('input[type="checkbox"]');

全选功能

创建一个全选按钮，并为其添加事件监听器：

const selectAll = document.getElementById('selectAll');

selectAll.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = true;
  });
});

全不选功能

同理，创建全不选按钮，并添加事件监听器：

const deselectAll = document.getElementById('deselectAll');

deselectAll.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = false;
  });
});

反选功能

再创建一个反选按钮，并添加事件监听器：

const invertSelection = document.getElementById('invertSelection');

invertSelection.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = !check.checked;
  });
});

获取已选中的复选框值

最后，我们希望获取已选中的复选框值。可以创建一个元素，用于展示选中的值：

<div id="selectedValues"></div>

在 JavaScript 中，使用以下代码获取已选中的复选框值：

const selectedValues = document.getElementById('selectedValues');

checks.forEach((check) => {
  check.addEventListener('change', () => {
    const selectedValuesArray = [];
    checks.forEach((check) => {
      if (check.checked) {
        selectedValuesArray.push(check.value);
      }
    });

    selectedValues.textContent = `已选中的值：${selectedValuesArray.join(', ')}`;
  });
});

示例代码

结合上述代码，完整的示例代码如下：

<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<input type="checkbox" id="check3">

<button id="selectAll">全选</button>
<button id="deselectAll">全不选</button>
<button id="invertSelection">反选</button>

<div id="selectedValues"></div>

const checks = document.querySelectorAll('input[type="checkbox"]');
const selectAll = document.getElementById('selectAll');
const deselectAll = document.getElementById('deselectAll');
const invertSelection = document.getElementById('invertSelection');
const selectedValues = document.getElementById('selectedValues');

selectAll.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = true;
  });
});

deselectAll.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = false;
  });
});

invertSelection.addEventListener('click', () => {
  checks.forEach((check) => {
    check.checked = !check.checked;
  });
});

checks.forEach((check) => {
  check.addEventListener('change', () => {
    const selectedValuesArray = [];
    checks.forEach((check) => {
      if (check.checked) {
        selectedValuesArray.push(check.value);
      }
    });

    selectedValues.textContent = `已选中的值：${selectedValuesArray.join(', ')}`;
  });
});