jQuery 处理表单元素的代码


Posted in Javascript onFebruary 15, 2010

1.获取input类的值: $("input").val();

2.获取textarea类的值: $("textarea").val();

3.获取select类的值:$("select").val();

当表单上含有多个input类(或者textarea类和select类),使用上述方法得到的将是一个数组。当然,你可以给这些控件加上ID,从而对某个特定的控件取值,例如:$("input#myID").val()。

下面将对每一种控件的取值方法做一一介绍:

1. input type="text" 单行文本输入框和input type="password" 密码输入框

$("input").val();2. input type="radio" 单选框

$("input:checked").val(); //使用checked,取被选中的单选框的值3. input type="checkbox" 复选框 (值得注意)

$("input:checked").each(function(index){
$("#result").append($(this).val() + " ");
});
//因为复选框的选择结果通常大于1,所以得到的结果是数组。
//使用.each()方法,可以把选择的值一一取出。
//这里结果将被加入(append)到ID为"result"的段落里4. input type="submit" (表单提交按钮)

取值方法和单行文本输入框的取法相同,但没有什么实际意义。

5. textArea 多行文本输入框

$("textarea").val();6. select 下拉框 (单选和多选)

$("select").val();
//注意:如果是复选,那么得到的结果是用逗号分格的字符串,例如:"选择一,选择二”。注意:

对表单元素取值,通常是发生在表单别递交后,在jQuery我们可以用下面的语句进行判断:
$("form").submit(function(){
$("input").val();
});对表单元素设值,只要把要设置的值作为传递参数即可,例如:$("input").val("3water.com");

Javascript 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
Vue动态获取width的方法
Aug 22 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
jQuery 树形结构的选择器
Feb 15 #Javascript
jQuery 处理网页内容的实现代码
Feb 15 #Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 #Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 #Javascript
Jquery iframe内部出滚动条
Feb 11 #Javascript
jquery 问答知识整理
Feb 11 #Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 #Javascript
You might like
php生成随机颜色的方法
2014/11/13 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
webpack多页面开发实践
2017/12/18 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python3 修改默认环境的方法
2019/02/16 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
软件毕业生个人鉴定
2014/03/03 职场文书
服务标兵事迹材料
2014/05/04 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
付款承诺函范文
2015/01/21 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
自考生自我评价
2019/06/21 职场文书
python实现高效的遗传算法
2021/04/07 Python
MySql开发之自动同步表结构
2021/05/28 MySQL