jquery 获取表单元素里面的值示例代码


Posted in Javascript onJuly 28, 2013

jquery 笔记:

$(“input[name='radio_name']:checked”).val() 
<input type="radio" value="1" name="radio_name" />1 
<input type="radio" value="2" name="radio_name" />2 
<input type="radio" value="3" name="radio_name" />3

网上的东西太乱了,而且jQuery不同版本可能写法不太一样,经过搜索和做实验,下面写的是jQuery 1.3.2版本下的
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置:
获取一组radio被选中项的值:var item = $('input[name=items][checked]‘).val();

获取select被选中项的文本
var item = $(”select[@name=items] option[@selected]“).text();
获取select被选中项的文本 :var item = $(”select[name=items] option[selected]“).text(); 或
$(”select[name=items]“).find(”option:selected”).text();
select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1;
select下拉框value = ‘val'的元素为当前选中项:$(”select[name=items] option[value='val']“).attr(”selected”,”selected”);
radio单选组的第二个元素为当前选中项 :$('input[@name=items]‘).get(1).checked = true; 或$('input[name=items]‘).attr(”checked”,1′);
radio的value = ‘val'的元素为当前选中项:$('input[name=items][value='val']‘).attr(”checked”,”checked”);
获取值:
文本框,文本区域:$(”#txt”).attr(”value”);
多选框checkbox:$(”input[name='checkbox':checked]“).each(function(){
var val = $(this).val();
});
单选组radio: $(”input[type=radio][checked]“).val();
下拉框select的value值: $('select').val();
下拉框select选中的text值:$(”select”).find(”option:selected”).text();

控制表单元素:
文本框,文本区域:$(”#txt”).attr(”value”,”); //清空内容
$(”#txt”).attr(”value”,'11′); //填充内容
多选框checkbox:
checkbox的第二个元素被打勾:$(”input[name=items]“).get(1).checked = true; //打勾
$(”input[name=items]“).get(1).checked = false; //不打勾
checkbox的value='val'的元素前打勾:$(”input[name=item][value='val']“).attr(”checked”,true);或$(”input[name=item][value='val']“).attr(”checked”,”checked”);
if($(”input[name=item][value='val']“).attr('checked')==true) //判断是否已经打勾
单选组radio: $(”input[type=radio]“).attr(”checked”,'2′);//设置value=2的项目为当前选中项
下拉框select: $(”#sel”).attr(”value”,'-sel3′);//设置value=-sel3的项目为当前选中项
$(”<option value='1′>1111</option><option value='2′>2222</option>”).appendTo(”#sel”)//添加下拉框的option
$(”#sel”).empty();//清空下拉框

jQuery获取Radio选择的Value值
代码$("input[name='radio_name'][checked]").val(); //选择被选中Radio的Value值
$("#text_id").focus(function(){//code...}); //事件 当对象text_id获取焦点时触发
$("#text_id").blur(function(){//code...}); //事件 当对象text_id失去焦点时触发
$("#text_id").select(); //使文本框的Vlaue值成选中状态
$("input[name='radio_name'][value='要选中Radio的Value值'").
attr("checked",true); //根据Value值设置Radio为选中状态

jQuery获取CheckBox选择的Value值
$("input[name='checkbox_name'][checked]"); //选择被选中CheckBox元素的集合 如果你想得到Value值你需要遍历这个集合
$($("input[name='checkbox_name'][checked]")).
each(function(){arrChk+=this.value +',';});//遍历被选中CheckBox元素的集合 得到Value值
$("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$("#checkbox_id").attr("checked",true); //设置一个CheckBox的状态为选中(checked=true)
$("#checkbox_id").attr("checked",false); //设置一个CheckBox的状态为不选中(checked=false)
$("input[name='checkbox_name']").attr
("checked",$("#checkbox_id").attr("checked"));//根据3,4,5条,你可以分析分析这句代码的意思
$("#text_id").val().split(","); //将Text的Value值以','分隔 返回一个数组
上面的这些操作,其实就是jQuery选择器的使用,希望大家对jQuery选择器方面的知识要掌握扎实。

Javascript 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JSON相关知识汇总
Jul 03 Javascript
如何用angularjs制作一个完整的表格
Jan 21 Javascript
详解jenkins自动化部署vue
May 14 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
a标签的href和onclick 的事件的区别介绍
Jul 26 #Javascript
alert中断settimeout计时功能
Jul 26 #Javascript
JS清除IE浏览器缓存的方法
Jul 26 #Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 #Javascript
js监听键盘事件示例代码
Jul 26 #Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 #Javascript
固定表格行列(expression)在IE下适用
Jul 25 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
javascript 闭包疑问
2010/12/30 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python中的异常处理简明介绍
2015/04/13 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
UML设计模式笔试题
2014/06/07 面试题
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
安全资料员岗位职责
2013/12/14 职场文书
全运会口号
2014/06/20 职场文书
社区服务标语
2014/07/01 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书