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判断变量是否空值的代码
Oct 26 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
JS修改css样式style浅谈
May 06 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 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
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
网上抓的一个特效
2007/05/11 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python+Wordpress制作小说站
2017/04/14 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
产品质量承诺范本
2014/03/31 职场文书
个人承诺书格式
2014/06/03 职场文书
城市创卫标语
2014/06/17 职场文书
会计求职自荐信
2014/06/20 职场文书
国防教育标语
2014/10/08 职场文书
介绍信如何写
2015/01/31 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
初一数学教学反思
2016/02/17 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Spring整合Mybatis的全过程
2021/06/28 Java/Android