jQuery如何获取多个input输入框的值，并存放在一个数组中

Posted 2023-03-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery如何获取多个input输入框的值，并存放在一个数组中相关的知识，希望对你有一定的参考价值。

首先通过jq获得你想要获取的input元素的数组，通过循环将每个input元素的值获取到。将input的值添加到数组。

代码：

123456789101112131415161718192021222324252627282930

//html代码<html> <body> <input type="text" name="ipt" value="1"/> <input type="text" name="ipt" value="2" /> <input type="text" name="ipt" value="3" /> <button onClick="getVal()">点击获得所有的input值</button> </body></html>//js<script type="text/javascript" src="jquery.1.11.3.min.js" ></script><script type="text/javascript"> //1.定义函数 getVal var getVal = function() //2.通过jq获得input数组 var $inputArr = $('input');//length = 3 //3.循环处理input,并定义结果集 var result = []; $inputArr.each(function() //4.将每个input的值放进结果集 result.push($(this).val()); ); //5.打印结果 console.log(result); </script>//另外的一种写法也可以实现//var valArr = $('input').map(function()return $(this).val()).get();//打印获得的值的数组//console.log(valArr);

1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

2、它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

3、jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

参考技术A

需要按照以下模板编程：
<!DOCTYPE
html><html
lang="en"><head>
<meta
charset="UTF-8">
<title>Document</title></head><body>
<div
id="box">
<input
type="text">
<input
type="text">
<input
type="text">
<input
type="text">
<input
type="button"
id="btn"
onclick="Total()"
value="转化为数组">
</div>
<script
src="这里是jquery文件路径"></script>
<script>
function
Total()

var
numArr
=
[];
//
定义一个空数组
var
txt
=
$('#box').find(':text');
//
获取所有文本框
for
(var
i
=
0;
i
<
txt.length;
i++)

numArr.push(txt.eq(i).val());
//
将文本框的值添加到数组中

console.info(numArr);

</script></body></html>
2.
3. stringify()函数
stringify()用于从一个对象解析出字符串，如
var
a
=
a:1,b:2
结果：
JSON.stringify(a)
""a":1,"b":2"
4.
5.
在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：
1.一种为使用eval()函数。
2.
第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据
data的解析。
dateType:json;
在php
controller返回
exit(json_encode(array('code'=>0,'msg'=>'交易流水号错误')));
最好使用ajax自带的dateType:json;

参考技术B

首先通过jq获得你想要获取的input元素的数组

通过循环将每个input元素的值获取到

将input的值添加到数组

代码：

//html代码
<html>
    <body>
        <input type="text" name="ipt" value="1"/>
        <input type="text" name="ipt" value="2" />
        <input type="text" name="ipt" value="3" />
        <button onClick="getVal()">点击获得所有的input值</button>
    </body>
</html>
//js
<script type="text/javascript" src="jquery.1.11.3.min.js" ></script>
<script type="text/javascript">
    //1.定义函数 getVal
    var getVal = function()
    //2.通过jq获得input数组
        var $inputArr = $('input');//length = 3
    //3.循环处理input,并定义结果集
        var result = [];
        $inputArr.each(function()
    //4.将每个input的值放进结果集
            result.push($(this).val());
        );
    //5.打印结果
        console.log(result);

</script>
//另外的一种写法也可以实现
//var valArr = $('input').map(function()return $(this).val()).get();
//打印获得的值的数组
//console.log(valArr);

参考技术C

1 var arr = [];

2.鼠标失去焦点$("input").blur(function() arr.push($(this).val()))

3.在失去焦点里面还可以验证一下输入数据是否符合要求符合要求才添加到数组里面

4 这就是有个BUG 每次移除都会添加到数组里，可以在push后让当前input禁止输入

例如

<button>打印arr</button>

var arr = [];

$("input").blur(function()

if($(this).val()!='')

arr.push($(this).val());

$(this).attr("readonly","readonly")