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实现在线选座订座之影院篇
Aug 24 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
Jan 13 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
JAVA面试题 static关键字详解
Jul 16 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
PHP 无限级分类
2017/05/04 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
利用django如何解析用户上传的excel文件
2017/07/24 Python
python实现名片管理系统
2018/11/29 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python 爬虫的原理
2020/07/30 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
任课老师推荐信范文
2013/11/24 职场文书
大学生实习思想汇报
2014/01/12 职场文书
2014信息公开实施方案
2014/02/22 职场文书
亚运会口号
2014/06/20 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
健康教育主题班会
2015/08/14 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers