如何使用 JavaScript 在选择选项中使用复选框？

概述

复选框（checkbox）是一个能够在选择时返回对/错（true/false）值的 HTML 输入元素。在一些情况下，当一个选项中涉及到多个复选框时，我们可能需要进行相关的计算。本文将介绍如何使用JavaScript在选择选项中使用复选框。

实现多选列表

多选列表可以让我们在一个列表中可以同时选择多个选项。我们可以使用 HTML 的 \<select> 标签实现。可以为选项分配一个唯一的值（value），并将多选属性（multiple）设置为 allowerd。

HTML代码

    <select multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
    </select>

JavaScript代码

    const selectElement = document.querySelector('select');
    selectElement.addEventListener('change', (event) => {
      let message = '';
      for (let i = 0; i < selectElement.selectedOptions.length; i++) {
        message += selectElement.selectedOptions[i].value + ' ';
      }
      alert(message);
    });

在上述JavaScript代码中，我们首先将\<select>标签存储为一个常量。然后，我们为其添加一个change侦听器。当某一个选项被选中或取消选中时，它就会被触发。当事件被触发时，我们通过循环遍历所有已选选项，并将其值存储在一个字符串中。最后，将字符串弹出到一个警告框中。

计算多选列表中选择的个数

在一些情况下，我们需要统计多选列表中已选择的项目数目。我们可以使用如下代码实现：

HTML代码

    <select multiple>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <option value="4">选项4</option>
    </select>
    <div>已选择： <strong id="count">0 </strong></div>

JavaScript代码

    const selectElement = document.querySelector('select');
    const countElement = document.querySelector('#count');
    selectElement.addEventListener('change', (event) => {
      countElement.textContent = selectElement.selectedOptions.length;
    });

这段 JavaScript 代码使用了前一个例子中的 HTML代码。它首先将选择列表和计数器（count）保存为常量。接着，添加一个change事件侦听器。每个选项的选中或非选中状态变化都会触发change事件。一旦选项变化，JavaScript代码就会在计数器元素中更新已选选项的数目。count.textContent = selectElement.selectedOptions.length;。

计算已选择的项目总值

在下面例子中，我们将尝试计算选择的所有项目的总值。首先，每个选项给定了一个数值。然后，我们在选择改变时遍历了每个选定的选项，并将它们的价值相加。最后，将计算结果展示到网页上。

HTML代码

    <select multiple>
      <option value="1">选项1（价值为1）</option>
      <option value="2">选项2（价值为2）</option>
      <option value="3">选项3（价值为3）</option>
      <option value="4">选项4（价值为4）</option>
    </select>
    <div>共计：<strong id="sum">0</strong></div>

JavaScript代码

    const selectElement = document.querySelector('select');
    const sumElement = document.querySelector('#sum');
    const options = {
      1: 1,
      2: 2,
      3: 3,
      4: 4
    }
    selectElement.addEventListener('change', (event) => {
      let sum = 0;
      for (let i = 0; i < selectElement.selectedOptions.length; i++) {
        sum += options[selectElement.selectedOptions[i].value];
      }
      sumElement.textContent = sum;
    });

该 JavaScript 代码使用了前一个例子中的 HTML 代码。第一个常量（selectElement）存储一个选择列表，第二个常量（sumElement）存储计数器元素。与之前相比，我们添加了一个options对象——它将每个选项的值映射到其价值。当一个选项被选择时，JavaScript代码会遍历所有已选中的选项，并将其价值相加。注意，通过使用该对象，我们已经完成了一个多选列表中各选择值的汇总。

处理多列表中的多个复选框

HTML允许您在一个表格中定位多个复选框。例如，在下面的HTML例子中，我们在表格中的第一列中定义了几个选项，每一行表示一件物品，第二列表示复选框，可以在列表中选择是否购买该物品。

HTML代码

    <table>
      <thead>
      <tr>
        <th>商品名称</th>
        <th>购买</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>物品1</td>
        <td><input type="checkbox" value="1"></td>
      </tr>
      <tr>
        <td>物品2</td>
        <td><input type="checkbox" value="2"></td>
      </tr>
      <tr>
        <td>物品3</td>
        <td><input type="checkbox" value="3"></td>
      </tr>
      </tbody>
    </table>
    <div>选定（选择）：<strong id="selected">0</strong></div>
    <div>总价值：<strong id="total">0</strong></div>

在上面的HTML代码中，我们使用\<table>标记定义了一个表格。桌子中的第一列定义了每个项目的名称，第二列包含了一个用于复选框的\<input type="checkbox">类型。这个输入元素具有一个唯一的价值，它代表了该项目的价值。注：使用input type="checkbox"标签时，value看起来与选择器中的其他代码不相似，但它仍会在这里使用。另外，我们添加了“chosen（selected）”和“total”ID的两个参数，这些参数将在JavaScript代码中被用来跟踪已选择项目的情况，以及它们的总价值。

JavaScript代码

    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    const selectedElement = document.querySelector('#selected');
    const totalElement = document.querySelector('#total');
    const values = {
      1: 10.50,
      2: 20.00,
      3: 30.00
    }
    let selected = 0;
    let total = 0;
    checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', (event) => {
        const value = parseFloat(values[checkbox.value]);
        if (checkbox.checked) {
          total += value;
          selected++;
        } else {
          total -= value;
          selected--;
        }
        selectedElement.textContent = selected;
        totalElement.textContent = total.toFixed(2);
      });
    });

JavaScript 代码将所有具有属性 type = "checkbox" 的输入元素存储在一个常量中。我们还定义了两个其他常量，分别表示“被选定的数目”和“总金额”。该代码利用JavaScript ES6的forEach功能（对于数组中的每个元素，都运行给定的函数）。当某个复选框发生变化时，change事件会被触发，并且引发一个函数。选择框的价值被由“values”变量中的一个对象表示，然后相应地更改“selected”和“total”变量的值。最后，这些值被更新到网页中。

总结

本文介绍了如何使用JavaScript在选择选项中使用复选框。我们首先了解了如何为多选列表添加侦听器、统计选择的项目个数，然后详细说明了如何计算已选择的项目总值。最后，我们讨论了如何处理多个复选框，以及如何跟踪这些复选框的状态和价值。