如何使用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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layui动态渲染生成select的option值方法
Sep 23 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python 实现归并排序算法
2012/06/05 Python
pandas多级分组实现排序的方法
2018/04/20 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python如何实现转换URL详解
2019/07/02 Python
python实现简单成绩录入系统
2019/09/19 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
园长自我鉴定
2013/10/06 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
承诺书格式
2014/06/03 职场文书
档案工作汇报材料
2014/08/21 职场文书
医药销售自我评价200字
2014/09/11 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书