如何从 JavaScript 中的多选框获取值 - JavaScript

在 JavaScript 中，我们经常需要从多选框（checkbox）中获取选中的值。本文将向您介绍几种常用的实现方式。

1. 使用原生 JavaScript

// 获取所有多选框元素
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 创建一个数组存储选中的值
const selectedValues = [];

// 循环遍历多选框元素
for (let i = 0; i < checkboxes.length; i++) {
  // 检查多选框是否被选中
  if (checkboxes[i].checked) {
    // 将选中的值添加到数组中
    selectedValues.push(checkboxes[i].value);
  }
}

// 输出选中的值
console.log(selectedValues);

在上述代码中，我们首先使用 querySelectorAll 方法获取所有类型为 "checkbox" 的元素。然后，我们创建一个空数组 selectedValues 来存储选中的值。接下来，我们通过一个循环遍历每个多选框元素，并检查其是否被选中。如果被选中，我们将其值添加到 selectedValues 数组中。最后，我们打印出选中的值。

2. 使用 jQuery

如果您在项目中使用了 jQuery 库，您可以使用它提供的便捷方法来获取多选框的值。

// 获取选中的值
const selectedValues = $('input[type="checkbox"]:checked')
  .map(function() {
    return $(this).val();
  })
  .get();

// 输出选中的值
console.log(selectedValues);

上述代码中，我们使用了 jQuery 的选择器 $ 来选择所有选中的多选框元素。然后，我们使用 map 方法遍历每个选中的多选框，并返回其值。最后，我们通过 get 方法获取所有选中的值，并将其存储在 selectedValues 数组中。

3. 使用框架库（如 React）

如果您使用框架库（如 React），通常会提供相应的组件或方法来获取多选框的值。

以 React 为例，您可以通过使用 useState 钩子来实现：

import React, { useState } from 'react';

function MultiCheckboxForm() {
  const [selectedValues, setSelectedValues] = useState([]);

  const handleCheckboxChange = (e) => {
    const value = e.target.value;
    if (e.target.checked) {
      setSelectedValues([...selectedValues, value]);
    } else {
      setSelectedValues(selectedValues.filter((val) => val !== value));
    }
  };

  return (
    <form>
      <label>
        <input
          type="checkbox"
          value="Option 1"
          checked={selectedValues.includes('Option 1')}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>

      <label>
        <input
          type="checkbox"
          value="Option 2"
          checked={selectedValues.includes('Option 2')}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>

      <label>
        <input
          type="checkbox"
          value="Option 3"
          checked={selectedValues.includes('Option 3')}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>
    </form>
  );
}

在上述代码中，我们使用了 React 的 useState 钩子来存储选中的值。通过 handleCheckboxChange 函数，我们在多选框的状态改变时更新选中的值。最后，我们在每个多选框元素上都使用 checked 属性来标记是否选中，并将其值与 selectedValues 数组进行比较。

以上是几种常见的方法，您可以根据自己的项目需要选择适合的方法来从 JavaScript 中的多选框中获取值。