jQuery获取及设置表单input各种类型值的方法小结


Posted in Javascript onMay 24, 2016

本文实例讲述了jQuery获取及设置input各种类型值的方法。分享给大家供大家参考,具体如下:

获取一组radio被选中项的值

var item = $("input[@name=items]:checked").val();

获取select被选中项的文本

var item = $("select[@name=items] option[@selected]").text();

select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$('input[@name=items]').get(1).checked = true;

获取值:

文本框,文本区域:

$("#txt").attr("value");
$("#txt").val();

多选框checkbox:

$("#checkbox_id").attr("value");

单选组radio:

$("input[@type=radio][@checked]").val();

下拉框select:

$('#sel').val();

控制表单元素:

文本框,文本区域:

$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

多选框checkbox:

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio:

$("input[@type=radio]").attr("checked",'2');
//设置value=2的项目为当前选中项

下拉框select:

$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")
.appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

在Jquery中,用$("#id")来获得页面的input元素,其相当于document.getElementById("element")但 是,该获取的是一个Jquery对象,而不是一个dom element对象.value是dom element对象的属性.所以,使用$("#id").value不能取到值取值的方法如下:

取值:

val = $("#id")[0].value;
$("#id")[0].value = "new value";

赋值:

$("#id")[0].value = "new value";
//或者$("#id").val("new value");
val = $("#id").attr("value");

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
在JavaScript中使用JSON数据
Feb 15 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 #Javascript
jQuery中事件与动画的总结分享
May 24 #Javascript
jQuery根据表单name获取值的方法
May 24 #Javascript
深入理解jquery自定义动画animate()
May 24 #Javascript
深入理解jquery中的事件与动画
May 24 #Javascript
Jquery元素追加和删除的实现方法
May 24 #Javascript
jquery html动态添加的元素绑定事件详解
May 24 #Javascript
You might like
PHP 危险函数解释 分析
2009/04/22 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
vue实现简单全选和反选功能
2020/09/15 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
python怎么调用自己的函数
2020/07/01 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python