jquery如何获取用户表单提交值
2016-06-22 15:22
483 查看
表单在用户交互中用到的很频繁,我们有几种方法可以获得用户表单输入值
1.获取方法:
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script src="jquery.js"></script>
</head>
<body>
<form action="#" method="get">
用户名:<br>
<input type="text" name="aa"><br>
性别:<br>
<input type="radio"
4000
name="bb" value="男">男
<input type="radio" name="bb" value="女">女<br>
学历:<br>
<input type="radio" name="cc" value="小学">小学
<input type="radio" name="cc" value="中学">中学
<input type="radio" name="cc" value="大学">大学
<input type="radio" name="cc" value="研究生">研究生<br>
爱好:<br><input type="checkbox" name="dd" value="吃饭">吃饭
<input type="checkbox" name="dd" value="睡觉">睡觉
<input type="checkbox" name="dd" value="打豆豆">打豆豆 <br>
所在城市:<br>
<select name="ee">
<option value="武汉">武汉</option>
<option value="杭州">杭州</option>
<option value="河源">河源</option>
</select>
<br> <input type="button" value="点击" onclick="fun1();"></form>
<script>
$(function(){
$(":button").css({"width":"100%","height":"80px"});
$(":button").click(function(){
// alert($(":checkbox:checked").val())
document.write("用户名:"+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历:"
+$(":radio[name='cc']:checked").val()+"<br>爱好:"+$(":checkbox:checked").val()+"<br>来自:"+$(":selected").val())
});
});
</script>
</body>
</html>
单选信息value值都能获取,但是多选框只能获取我选择的第一个checked值
那我们来研究如何获取多选框中的数值
1.获取方法:
<html>
<head>
<meta charset="utf-8">
<title>表单过滤器</title>
<script src="jquery.js"></script>
</head>
<body>
<form action="#" method="get">
用户名:<br>
<input type="text" name="aa"><br>
性别:<br>
<input type="radio"
4000
name="bb" value="男">男
<input type="radio" name="bb" value="女">女<br>
学历:<br>
<input type="radio" name="cc" value="小学">小学
<input type="radio" name="cc" value="中学">中学
<input type="radio" name="cc" value="大学">大学
<input type="radio" name="cc" value="研究生">研究生<br>
爱好:<br><input type="checkbox" name="dd" value="吃饭">吃饭
<input type="checkbox" name="dd" value="睡觉">睡觉
<input type="checkbox" name="dd" value="打豆豆">打豆豆 <br>
所在城市:<br>
<select name="ee">
<option value="武汉">武汉</option>
<option value="杭州">杭州</option>
<option value="河源">河源</option>
</select>
<br> <input type="button" value="点击" onclick="fun1();"></form>
<script>
$(function(){
$(":button").css({"width":"100%","height":"80px"});
$(":button").click(function(){
// alert($(":checkbox:checked").val())
document.write("用户名:"+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历:"
+$(":radio[name='cc']:checked").val()+"<br>爱好:"+$(":checkbox:checked").val()+"<br>来自:"+$(":selected").val())
});
});
</script>
</body>
</html>
单选信息value值都能获取,但是多选框只能获取我选择的第一个checked值
那我们来研究如何获取多选框中的数值
1.常规for循环:
复选框选中返回的是一个数组。默认返回下标为0的对象。想要获取多个选中的。可以参考一下代码 $(function(){ $(":button").css({"width":"100%","height":"80px"}); $(":button").click(function(){ var str="爱好:"; var checked_arr=$(":checkbox:checked"); for(var i=0;i<checked_arr.length;i++){ if(i==checked_arr.length-1){ str=str+$(checked_arr[i]).val(); }else{ str=str+$(checked_arr[i]).val()+","; } } document.write("用户名:"+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历:" +$(":radio[name='cc']:checked").val()+"<br>爱好:"+str+"<br>来自:"+$(":selected").val()) }); });
2.使用each函数或者map函数进行遍历:
var str="" $(":checkbox:checked").each(function(index){ str=str+this.value+"," }) // alert(str) // alert($(":checkbox:checked").val()) document.write("用户名:"+$(":text").val()+"<br>性别:"+$(":radio[name='bb']:checked").val()+"<br>学历:" +$(":radio[name='cc']:checked").val()+"<br>爱好:"+str+"<br>来自:"+$(":selected").val())
相关文章推荐
- asp.net mvc基于jQuery+Ajax实现无刷新分页
- jQuery 操作元素
- 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
- 浅析jQuery Ajax通用js封装
- jquery实现前台倒计时。应用下单24小时后自动取消该订单
- jquery的$.extend()、$.fn和$.fn.extend()
- jquery避免单双击事件冲突写法
- JQuery miscellany 整理
- jQuery如何用正则表达式验证手机号、身份证号、中文名称
- jquery 选择器 a 更多 简化
- 可模糊查询输入框(仿百度搜索栏)
- jQuery基础修炼圣典—事件篇
- jquery实现相册随机切换
- jQuery 3.0候选版本准备就绪
- 我们在使用jQuery的时候,到底在使用什么?
- JQuery中$.ajax()方法参数详解
- jQuery中$.get、$.post、$.getJSON、$.ajax 方法详解
- jQuery打印插件jqprint
- jQuery打印插件jqprint
- jQuery Ajax 实例 全解析