Javascript 以编程方式检查复选框

当我们需要在网页中让用户选择多个选项时，我们通常会使用复选框（Checkbox）。在处理用户选择的复选框时，我们需要以编程方式来检查用户选中了哪些选项。Javascript 提供了许多方法来处理复选框，本文将介绍几种常用的方式。

HTML

在 HTML 中，我们可以使用 元素来创建复选框。需要注意的是，所有的复选框必须有相同的名称（name），以便于我们以后方便地处理它们。

<form>
  <input type="checkbox" name="fruit" value="apple">苹果<br>
  <input type="checkbox" name="fruit" value="banana">香蕉<br>
  <input type="checkbox" name="fruit" value="orange">橙子<br>
  <input type="button" value="检查选项" onclick="checkFruit()">
</form>

在上面的代码中，我们创建了三个复选框，它们的名称都为 "fruit"，值分别为 "apple"、"banana" 和 "orange"，并且它们都有一个 onclick 事件，当用户点击 "检查选项" 按钮时，将调用名为 checkFruit 的函数。

Javascript

在 Javascript 中，我们可以使用多种方法来检查用户选择的复选框。

使用 getElementsByName 方法

getElementsByName 方法返回与指定名称相匹配的元素列表，我们可以使用该方法来获取所有名称为 "fruit" 的复选框，然后遍历它们并检查哪些复选框被选中了。

function checkFruit() {
  var fruit = document.getElementsByName("fruit");
  var selectedFruit = [];
  for (var i = 0; i < fruit.length; i++) {
    if (fruit[i].checked) {
      selectedFruit.push(fruit[i].value);
    }
  }
  alert("您选择了：" + selectedFruit.join(", "));
}

在上面的代码中，我们首先使用 getElementsByName 方法获取所有名称为 "fruit" 的元素，并将它们存储在一个名为 fruit 的变量中。然后我们定义了一个数组 selectedFruit，用于存储用户选择的水果名称。

接下来，我们遍历所有的 fruit 元素，如果某个元素被选中了（checked 属性为 true），则将该元素的值（value）存储到 selectedFruit 数组中。

最后，我们弹出一个包含用户选择的水果名称的提示框。

使用 querySelectorAll 方法

querySelectorAll 方法返回与指定选择器匹配的所有元素列表，我们可以使用该方法来获取所有名称为 "fruit" 的复选框，然后遍历它们并检查哪些复选框被选中了。

function checkFruit() {
  var fruit = document.querySelectorAll('input[name="fruit"]:checked');
  var selectedFruit = [];
  for (var i = 0; i < fruit.length; i++) {
    selectedFruit.push(fruit[i].value);
  }
  alert("您选择了：" + selectedFruit.join(", "));
}

在上面的代码中，我们使用 querySelectorAll 方法获取所有名称为 "fruit" 的已选中（checked）的复选框，并将它们存储在一个名为 fruit 的变量中。然后我们定义了一个数组 selectedFruit，用于存储用户选择的水果名称。

接下来，我们遍历所有的 fruit 元素，将它们的值（value）存储到 selectedFruit 数组中。

最后，我们弹出一个包含用户选择的水果名称的提示框。

结论

使用 Javascript 以编程方式检查复选框可以让我们更好地处理用户选择的多选项。本文介绍了两种常用的方法，分别是使用 getElementsByName 方法和使用 querySelectorAll 方法。无论哪种方法，都需要我们遍历复选框并检查哪些选项被选中了，然后将它们的值存储到一个数组中。