如何用jQuery批量为HTML表单元素赋值（基于数据对象）

当然可以！完全不用挨个手动给每个表单元素写赋值逻辑，用jQuery几行代码就能搞定批量赋值，省心又高效，我平时做项目经常这么用。

先假设你的HTML表单结构大概是这样的（对应你的字段名）：

<form id="userForm">
  <input type="text" name="name" placeholder="姓名">
  <input type="number" name="age" placeholder="年龄">
  <input type="text" name="Country" placeholder="国家">
</form>

然后直接上核心代码，一步到位：

const obj = { name:'john', age:10, Country:'USA' };

// 批量赋值核心逻辑
$.each(obj, (key, value) => {
  $(`#userForm [name="${key}"]`).val(value);
});

代码解释 #

• 用$.each()遍历你的数据对象obj，每次循环会拿到对象的键（key，对应表单元素的name属性）和对应的值（value）。
• 通过属性选择器[name="${key}"]精准定位到表单里name属性和当前key匹配的元素，再用jQuery的.val(value)方法给它赋值。

额外说明 #

• 这个方法不止适用于input，像select、textarea这类表单控件也能完美适配，因为.val()方法对所有标准表单元素都生效。
• 如果你的表单没有id，也可以用其他选择器定位（比如$('form')或者类选择器$('.user-form')），只要能准确选中目标表单即可。

内容的提问来源于stack exchange，提问作者Natesh bhat