在 JavaScript 中获取表单值

在前端开发中，我们经常需要获取表单中的数据进行操作。下面将介绍如何在 JavaScript 中获取表单值。

一、获取单个表单元素的值

我们可以通过 document.getElementById 或 document.querySelector 来获取单个表单元素，然后再通过其 value 属性获取其值。例如：

const input = document.getElementById('input');
const value = input.value;

const input = document.querySelector('#input');
const value = input.value;

其中，#input 表示 id 为 input 的元素。

二、获取一组表单元素的值

如果我们需要获取一组表单元素的值，可以通过 document.getElementsByName 或 document.querySelectorAll 来获取元素列表，然后遍历获取每个元素的值。例如：

const radios = document.getElementsByName('radio');
let value;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    value = radios[i].value;
    break;
  }
}

const checkboxes = document.querySelectorAll('input[type=checkbox]');
const values = [];
checkboxes.forEach((checkbox) => {
  if (checkbox.checked) {
    values.push(checkbox.value);
  }
});

其中，name 表示元素的名称，type=checkbox 表示类型为复选框的元素。

三、获取表单中所有元素的值

如果我们需要获取表单中所有元素的值，可以通过 form.elements 属性获取元素列表，然后遍历获取每个元素的值。例如：

const form = document.getElementById('form');
const elements = form.elements;
const data = {};
for (let i = 0; i < elements.length; i++) {
  const element = elements[i];
  if (element.name) {
    data[element.name] = element.value;
  }
}

其中，#form 表示 id 为 form 的表单元素。

四、总结

以上就是在 JavaScript 中获取表单值的常用方法。我们也可以利用第三方库如 jQuery 等来简化获取表单值的操作。