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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
浅谈Vue数据响应思路之数组
Nov 06 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
JS html事件冒泡和事件捕获操作示例
May 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
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
bootstrap table实例详解
2017/01/06 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
jQuery实现复制到粘贴板功能
2017/02/11 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
Python使用Scrapy爬取妹子图
2015/05/28 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
"引用"与多态的关系
2013/02/01 面试题
中专毕业生个人职业生涯规划
2014/02/19 职场文书
高校教师岗位职责
2014/03/18 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
借名购房协议书范本
2014/10/06 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
SQL SERVER中的流程控制语句
2022/05/25 SQL Server