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 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
微信小程序实现签到功能
Oct 31 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
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+mysql留言本源码
2009/11/11 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python标准库os库的函数介绍
2020/02/12 Python
Python内置函数property()如何使用
2020/09/01 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
教育专业自荐书范文
2013/12/17 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
师范生自我鉴定
2014/03/20 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python