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中的几个关键概念的理解-原型链的构建
May 12 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 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编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
学校消防安全制度
2014/01/30 职场文书
中秋寄语大全
2014/04/11 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
运动会报道稿大全
2015/07/23 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers