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向flash swf文件传递参数值注意细节
Dec 11 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
vue中div禁止点击事件的实现
Apr 02 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
出纳员岗位职责风险
2014/03/06 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年个人委托书范本
2014/10/13 职场文书
电子商务实训报告总结
2014/11/05 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python