上一篇
如何获取form表单的JS值？，代码示例有哪些？
通过 form 获取表单值的方法
在 JavaScript 中，获取表单元素的值通常通过以下方式实现：找到表单对象，然后通过其 elements 集合或直接使用元素 ID 访问特定输入，再读取对应的 value 属性。
获取表单对象
- 使用 document.forms[index] 或 document.forms['formName']
- 使用 document.getElementById('formId')
- 使用 document.querySelector('form')
访问表单元素
- 通过 form.elements[index] 或 form.elements['elementName']
- 通过 form.elementName（直接使用 name 属性，但不推荐）
- 通过 document.getElementById('elementId')
不同类型元素的值获取方式
文本输入框（input type=”text”、textarea）
- 直接使用 .value 属性
- 示例：let val = document.getElementById('username').value;
单选按钮（radio）
- 需遍历 radio 组，找到 checked 为 true 的元素，再取其 .value
- 示例： let radios = form.elements['gender']; for (let r of radios) { if (r.checked) { val = r.value; break; } }
复选框（checkbox）
- 单个复选框：使用 .checked 判断是否选中，再用 .value 获取值
- 一组复选框：可遍历收集所有被选中的值
- 示例： let checkedValues = []; let checkboxes = form.elements['hobby']; for (let c of checkboxes) { if (c.checked) checkedValues.push(c.value); }
下拉列表（select）
- 单选 select：selectElement.value 获取选中项的值，或 selectElement.options[selectElement.selectedIndex].value
- 多选 select（multiple）：遍历 options，取 selected 为 true 的项的值
- 示例： let sel = form.elements['city']; let val = sel.value; // 单选时
使用 form.elements 集合的示例表格
| 元素类型 | 获取值方式 | 注意点 |
|---|---|---|
| 文本输入框 | element.value | 直接读取 |
| 密码框 | element.value | 与文本相同 |
| 文本域（textarea） | element.value | 注意是 value 不是 innerHTML |
| 单选按钮 | 遍历 elements['name']，取 checked 项的 value | 必须判断 checked |
| 复选框 | 遍历 elements['name']，取 checked 项的 value 数组 | 可返回多个值 |
| 下拉菜单（单选） | element.value 或 element.options[element.selectedIndex].value | 简洁方式 value |
| 下拉菜单（多选） | 遍历 options，取 selected 为 true 的 value | 返回数组 |
| 隐藏域 | element.value | 与文本相同 |
| 文件上传 | element.files[0] 获取文件对象，需进一步处理 | 不能用 value 获取真实路径 |
获取表单值的常见模式
- 通过表单的 submit 事件：在事件处理函数中通过 event.target 或 this 获取表单对象
- 通过按钮点击事件：先定位表单，再获取元素
- 使用 FormData 对象： let formData = new FormData(formElement);
let value = formData.get('fieldName'); // 单个值
let values = formData.getAll('fieldName'); // 多个值（如复选框）
FormData 自动处理文件与多值，适用于现代浏览器。
相关问题与解答
问题1：如何获取表单中所有被选中的复选框的值？
解答：获取表单对象后，使用 form.elements['checkboxName'] 得到复选框集合（NodeList 或 HTMLCollection），遍历该集合，判断每个元素的 checked 属性，若为 true 则将其 value 存入数组，也可使用 FormData.getAll('checkboxName') 直接得到所有选中值的数组，但需要注意 FormData 只包含有 name 且未被禁用的元素。
问题2：获取 select 下拉框的值时，使用 element.value 和 element.options[element.selectedIndex].value 有什么区别？
解答：两者在单选下拉框中通常返回相同结果，element.value 是更简洁的写法，浏览器内部会返回选中项 option 的 value 属性，但当 option 没有设置 value 属性时，element.value 返回的是该 option 的文本内容（text），而 element.options[element.selectedIndex].value 在无 value 属性时返回空字符串（部分浏览器可能返回 text），因此推荐显式设置 value 属性，并使用 element.value 获取，对于多选下拉框，element.value 只返回第一个选中项的值，此时必须遍历 options 才能获取所有选中值。
