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插件制作 表单验证实现代码
Aug 17 Javascript
js倒计时小程序
Nov 05 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
Node.js事件驱动
Jun 18 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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从数组中随机抽取一些元素的代码
2012/11/05 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JS前端笔试题分析
2016/12/19 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
iView框架问题整理小结
2018/10/16 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
python处理json数据中的中文
2014/03/06 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
如何通过jdbc调用存储过程
2012/04/19 面试题
新年晚会主持词
2014/03/24 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
仙境之桥观后感
2015/06/16 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js