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 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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
用header 发送cookie的php代码
2007/03/16 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
C/C++程序员常见面试题一
2012/12/08 面试题
大学生毕业自荐信
2013/10/10 职场文书
求职推荐信范文
2013/12/01 职场文书
工地安全质量标语
2014/06/07 职场文书
拉拉队口号
2014/06/16 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
MySQL自定义函数及触发器
2022/08/05 MySQL