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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 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
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
keras 权重保存和权重载入方式
2020/05/21 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
团结演讲稿范文
2014/05/23 职场文书
副总经理任命书
2014/06/05 职场文书
影视广告专业求职信
2014/09/02 职场文书
新郎婚礼致辞
2015/07/27 职场文书
财产分割协议书
2016/03/22 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
基于python实现银行管理系统
2021/04/20 Python