如何获取Javascript中仅选中复选框的值？

Question

这是我在这里的第一篇文章。 我的表格有问题。我希望能够仅获取表单上选中的框的值并将它们添加到输入之一。 问题是我要么得到所有复选框（选中或未选中），要么我得到未定义。 复选框是这样的

<input type="checkbox" className="checkbox" value="Triatholons" />
              Triathlon Training Plans
            </label>
    ```
    //and the function I have been trying is this 
    function itworked() {
  alert("Sky will contact you shortly!")
  var values = document.getElementsByClassName("checkbox:checked")
  console.log(values)
  }

这将返回一个 HTML 集合，当我尝试提取值时，我只会得到未定义的值。 我在这里想念什么？谢谢您的帮助。

Answer 1

首先，不要使用类，change your selector：

[type="checkbox"]:checked

与querySelectorAll一起使用：

document.querySelectorAll('[type="checkbox"]:checked')

现在，您将看到我们得到了一个 NodeList。如果您只想要其中的值，我们将不得不将元素“映射”到它们的值。最简单的方法是convert to an array with the spread syntax，并使用built-in array map feature。

const values = [
  ...document.querySelectorAll('[type="checkbox"]:checked')
].map(el => el.value);

这就是它的全部内容！你会看到这返回了一个值数组。