1、首相我们制作一个测试用的静态html页面。页面上面有5个文本输入框和一个按钮（参考效果图1）。
页码代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery获取所有文本框的值</title>
</head>
<body>
文本框1：<input type="text" id="text1" /><br />
<br />
文本框2：<input type="text" id="text2" /><br />
<br />
文本框3：<input type="text" id="text3" /><br />
<br />
文本框4：<input type="text" id="text4" /><br />
<br />
文本框5：<input type="text" id="text5" />
<input type="button" id="btnsee" value=" 查看 " /><br />
<br />
<span></span>
</body>
</html>
![jquery学习：[1]jQuery获取所有文本框的值](https://exp-picture.cdn.bcebos.com/e9a4f2eeadbcbe2fb4ceefab54dae43b3a867816.jpg)
2、页面制作完成了，我们要在html的<head>标签中引入 jquery-1.11.1.min.js 文件，然后，我们要给我按钮添加单击事件，获取用户输入文本框的文本，然后在按钮下面显示出来（参考效果图2）。
js代码如下：
<script src="../res/js/jquery-1.11.1.min.js"></script>
<script>
/*页面加载时，给按钮绑定单击事件*/
$(function () {
$("input[type='button']").click(function () {
/*循环获取文本框的值*/
$("input[type='text']").each(function () {
$("span").append($(this).val() + ",");
});
});
});
</script>
![jquery学习：[1]jQuery获取所有文本框的值](https://exp-picture.cdn.bcebos.com/4759c1dae43b3b86fa9fe6e4185653bbf9207516.jpg)
3、这样，我们的制作就完成了，jQuery获取输入框的值是不是很简单啊。
完整的页面代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../res/js/jquery-1.11.1.min.js"></script>
<script>
/*页面加载时，给按钮绑定单击事件*/
$(function () {
$("input[type='button']").click(function () {
/*循环获取文本框的值*/
$("input[type='text']").each(function () {
$("span").append($(this).val() + ",");
});
});
});
</script>
<title>jquery获取所有文本框的值</title>
</head>
<body>
文本框1：<input type="text" id="text1" /><br />
<br />
文本框2：<input type="text" id="text2" /><br />
<br />
文本框3：<input type="text" id="text3" /><br />
<br />
文本框4：<input type="text" id="text4" /><br />
<br />
文本框5：<input type="text" id="text5" />
<input type="button" id="btnsee" value=" 查看 " /><br />
<br />
<span></span>
</body>
</html>