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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 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
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
从0开始学Vue
2016/10/27 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python匹配中文的正则表达式
2016/05/11 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
详解Python自建logging模块
2018/01/29 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
python之array赋值技巧分享
2019/11/28 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
python实现ping命令小程序
2020/12/28 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
编写strcpy函数
2014/06/24 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
前厅部经理岗位职责范文
2014/02/04 职场文书
主持人大赛开场白
2015/05/29 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers