JQuery操作input

最新推荐文章于 2025-03-16 09:31:25 发布

abczdefg

最新推荐文章于 2025-03-16 09:31:25 发布

阅读量530

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/abczdefg/article/details/53044353

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用jQuery处理表单数据，当输入值后，通过jQuery获取表单元素，形成JSON字符串，其中key-value对应name和value。重点提到了处理单选框时需要注意checked属性，以及使用JSON.stringify()转换为JSON格式。还提及了利用map()等方法的简洁实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到一个操作表单的练习，以前并没有接触过，刚好拿来练习一下

对于下面的表单，输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：{“name”:”Michael”,”email”:…}

<form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="CD">Chengdu</option>
        <option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>

问题来源：
http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014370268753868fc999e1563341fcb9df078b160a20e5000

思路：使用jq选择器获取input后，根据name和value获得对应数据。但注意单选框radio部分，要注意判断是否选中，即checked的值是否为true。

'use strict';
var json = '{';
var input = $('#test-form [name]');
for(var i = 0; i < input.length; i++){
    if(input[i].name === 'gender'){
        if(!input[i].checked)  continue;
    }
    json += ('"' + input[i].name + '":"' + input[i].value + '"');
    if(i !== input.length - 1) json += ','
}
json += '}';

结果如下图：

也可以将json设为对象，逐一添加，最后使用JSON的stringify方法变为json字符串

var json = {};
...
json[input[i].name] = input[i].value;
...
json = JSON.stringify(json);

还有许多简介的方法，比如使用map()等