如何使用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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
Augularjs-起步详解
Jul 08 Javascript
JS创建对象的写法示例
Nov 04 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
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
php 在文件指定行插入数据的代码
2010/05/08 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP使用Session实现上传进度功能详解
2019/08/06 PHP
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python区块及区块链的开发详解
2019/07/03 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
HTTP状态码详解
2021/03/18 杂记
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
构造方法和其他方法的区别
2016/04/26 面试题
银行自荐信范文
2013/10/07 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
模范教师事迹材料
2014/12/16 职场文书
总结Python变量的相关知识
2021/06/28 Python
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
MySQL分布式恢复进阶
2022/07/23 MySQL