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 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
js中settimeout方法加参数
Feb 28 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 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 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
小小聊天室Python代码实现
2016/08/17 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
python的turtle库使用详解
2019/05/10 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
简单了解python中的与或非运算
2019/09/18 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
一套英文Java笔试题面试题
2016/04/21 面试题
美食节策划方案
2014/05/26 职场文书
校园文化标语
2014/06/18 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
详解MySQL的半同步
2021/04/22 MySQL
php实例化对象的实例方法
2021/11/17 PHP