JavaScript 如何修改 form 的值

在网页开发中，经常会遇到需要通过 JavaScript 修改 form 表单值的情况。这不仅能够提升用户体验，还能实现动态的数据交互。下面就详细介绍几种常见的修改 form 值的方法。

可以通过获取表单元素，然后直接修改其 value 属性。例如，有一个简单的文本输入框：

<form id="myForm">
  <input type="text" id="nameInput" value="初始值">
</form>

在 JavaScript 中，可以这样获取并修改其值：

// 获取输入框元素
const nameInput = document.getElementById('nameInput');
// 修改输入框的值
nameInput.value = '新的值';

对于单选框和复选框，同样可以通过获取元素并修改其 checked 属性来改变状态。比如：

<form id="myForm">
  <input type="radio" id="maleRadio" name="gender">男
  <input type="radio" id="femaleRadio" name="gender">女
</form>

// 选中男单选框
const maleRadio = document.getElementById('maleRadio');
maleRadio.checked = true;

对于下拉框（select 元素），可以通过修改 selectedIndex 属性来改变选中项。假设：

<form id="myForm">
  <select id="colorSelect">
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
  </select>
</form>

const colorSelect = document.getElementById('colorSelect');
// 选择蓝色选项
colorSelect.selectedIndex = 1;

另外，如果表单中有多个输入元素，也可以通过表单元素的 elements 属性来批量操作。例如：

<form id="myForm">
  <input type="text" id="input1">
  <input type="text" id="input2">
</form>

const myForm = document.getElementById('myForm');
// 遍历表单元素并修改值
for (let i = 0; i < myForm.elements.length; i++) {
  myForm.elements[i].value = '新值';
}

掌握这些方法，开发者就能在 JavaScript 中灵活地修改 form 的值，实现各种动态交互功能。无论是根据用户操作实时更新表单数据，还是在页面加载时预设某些值，这些技巧都能发挥重要作用，让网页应用更加流畅和智能。