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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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使用MySQL保存session会话的方法
2015/06/26 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
JS类的封装及实现代码
2009/12/02 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
《春晓》教学反思
2014/04/20 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
导游词之青岛崂山
2019/12/27 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python