获取输入复选框选中的数组

在 Web 开发中，复选框是一种常用的表单元素，它允许用户从给定的选项中选择多个。

当用户选中一些复选框后，开发人员通常需要获取选中的复选框的值，并将其用于后续的操作。下面将介绍如何使用 JavaScript 获取选中的复选框的值，以及如何将这些值存储为数组对象。

1. 获取选中的复选框

为了获取选中复选框的值，我们需要使用 checked 属性。这个属性返回一个布尔值，指示复选框是否被选中。

以下代码演示了如何检查单选框是否被选中：

const checkbox = document.getElementById('checkbox');
if (checkbox.checked) {
  console.log('Checkbox is checked!');
} else {
  console.log('Checkbox is not checked!');
}

如果复选框被选中，checked 属性返回 true；否则返回 false。

2. 存储为数组对象

如果有多个复选框，我们希望将这些值存储为一个数组对象，以方便后续操作。以下是一个示例 HTML：

<input type="checkbox" name="language" value="javascript">
<input type="checkbox" name="language" value="html">
<input type="checkbox" name="language" value="css">

要将选中的复选框值存储为数组对象，我们首先需要选中所有的复选框，然后仅存储被选中的复选框的值。

const checkboxes = document.querySelectorAll('input[name="language"]');
const selectedLanguages = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    selectedLanguages.push(checkboxes[i].value);
  }
}
console.log(selectedLanguages);

在上面的代码中，我们首先使用 querySelectorAll 方法选中所有的 name 属性为 "language" 的复选框元素。之后，我们利用一个 for 循环遍历所有复选框。如果复选框被选中，我们将其值添加到 selectedLanguages 数组中。

最后，我们可以在控制台中打印 selectedLanguages 数组，以检查正确性。

结果示例

const checkboxes = document.querySelectorAll('input[name="language"]');
const selectedLanguages = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    selectedLanguages.push(checkboxes[i].value);
  }
}
console.log(selectedLanguages);

在以上示例中，我们使用 querySelectorAll 方法选中了所有 name 属性为 "language" 的复选框元素，并且将被选中的值存储在 selectedLanguages 数组中。最后，我们在控制台中打印了该数组。