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 插件学习(五)
Aug 06 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
Jul 09 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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计划任务之ignore_user_abort函数实现方法
2015/01/08 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
jQuery textarea的长度进行验证
2009/05/06 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python中单下划线_的常见用法总结
2018/07/10 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
django 模型中的计算字段实例
2020/05/19 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
Internet体系结构
2014/12/21 面试题
乡镇安全生产目标责任书
2014/07/23 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS