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 09 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
Dec 19 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
H5实现手机拍照和选择上传功能
Dec 18 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
Mootools 1.2教程 事件处理
2009/09/15 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
JS运动特效之同时运动实现方法分析
2018/01/24 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python Trie树实现字典排序
2014/03/28 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
手把手教你python实现SVM算法
2017/12/27 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python3 元组tuple入门基础
2020/02/09 Python
python爬虫请求头的使用
2020/12/01 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
工作违纪检讨书
2014/02/17 职场文书
期末学生评语大全
2014/04/24 职场文书
代理人委托书
2014/08/01 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
租房协议书范例
2014/10/14 职场文书
爱心捐款感谢信
2015/01/20 职场文书
离婚协议书怎么写
2015/01/26 职场文书
高三生物教学反思
2016/02/22 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书