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 Form 页面表单提交的小例子
Nov 15 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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语法(2)
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php搜索文件程序分享
2015/10/30 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Saltstack快速入门简单汇总
2016/03/01 Python
ipython和python区别详解
2019/06/26 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
J2EE面试题
2016/03/14 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
就业自荐书
2013/12/05 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2014年创卫工作总结
2014/11/24 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
2015年父亲节寄语
2015/03/23 职场文书
大学团日活动总结书
2015/05/11 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
关于保护环境的建议书
2019/06/24 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL