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中的集合及效率
Jan 08 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
js调用刷新界面的几种方式
May 03 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
详解JavaScript的变量
Apr 04 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
实战node静态文件服务器的示例代码
2018/03/08 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python中文字符串截取问题
2015/06/15 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
使用Python实现批量ping操作方法
2020/05/06 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
面向对象编程OOP的优点
2013/01/22 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
2014年话务员工作总结
2014/11/19 职场文书
新闻稿件写作范文
2015/07/18 职场文书