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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
Layui 动态禁止select下拉的例子
Sep 03 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 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
react build 后打包发布总结
2018/08/24 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
青年文明号复核材料
2014/02/11 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
付款证明格式范文
2015/06/19 职场文书
运动会新闻报道稿
2015/07/22 职场文书
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python