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+等。
需要按照以下模板编程:
<!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;
首先通过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);
1 var arr = [];
2.鼠标失去焦点$("input").blur(function(){ arr.push($(this).val())})
3.在失去焦点里面还可以验证一下输入数据是否符合要求 符合要求才添加到数组里面
4 这就是有个BUG 每次移除都会添加到数组里,可以在push后让当前input禁止输入
例如
<input type="text" class='ipt1'>
<input type="text" class='ipt2'>
<button>打印arr</button>
<script>
var arr = [];
$("input").blur(function(){
if($(this).val()!=''){
arr.push($(this).val());
$(this).attr("readonly","readonly")
}
});
$("button").click(function(){
console.log(arr)
})
</script>
这时第一个input框已经无法再次输入了
这样就拿到了所有input里面的值
2015-08-24
var str = "";
$(".name").each(function(){
str += $(this).val() + "-";
});
先建立一个空的,然后循环,一个一个丢进去,“-”是为了区分