如何使用Jquery获取Form表单中被选中的radio值


Posted in Javascript onAugust 09, 2013

Jquery提供的选择器极大的方便了开发人员对Dom的操作,真正实现了代码简化,却功能强大的目标。下面就日常最常用的,在Form表单中如何获取被中选的Radio值做一小小的示例。

form表单如下:

<form name='form1' action="#" method="post"> 此处略去200字 
<input type="radio" name="opType" value="0" />搁置<br /> 
<input type="radio" name="opType" value="1" />解决<br /> 
<input type="radio" name="opType" value="2" />转派4<br /> 
</form>

那么如何获取被选中的radio值呢,Juqery为我们提供了如下几个方法
$("input[name='opType']:checked").val() -------此方法估计用的比较多,通俗易懂 $("input:radio:checked").val(); ---------此方法最简单,但是连着使用选择器不容易懂 
$("input[@name='opType'][checked]"); --------次方法中切记写成[@checked=checked],本人第一次就写成这个了

那么,偶尔也需要遍历一下radio,如何做呢?当然需要each出场了,具体如下:
$('input[name="opType"]').each(function(){ 
alert(this.name+this.value); 
});

应该明白了吧,若有什么更好的方法欢迎盖楼。
Javascript 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 #Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 #Javascript
javascript判断机器是否联网的2种方法
Aug 09 #Javascript
jquery 列表双向选择器之改进版
Aug 09 #Javascript
jquery 简单应用示例总结
Aug 09 #Javascript
JS命名空间的另一种实现
Aug 09 #Javascript
使用javascript创建快捷方式的简单实例
Aug 09 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
js实现简单计算器
2015/11/22 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js转换对象为xml
2017/02/17 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
Python的组合模式与责任链模式编程示例
2016/02/02 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
python的pip安装以及使用教程
2018/09/18 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python爬虫实现中英翻译词典
2019/06/25 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
大学生活学习的自我评价
2013/12/03 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书