jQuery操作input type=radio的实现代码


Posted in Javascript onJune 14, 2012

<input type="radio">如下:

<input type="radio" name="city" value="BeiJing">北京 
<input type="radio" name="city" value="TianJin">天津 
<input type="radio" name="city" value="NanJing">南京 
<input type="radio" name="city" value="YangZhou">扬州 
<input type="radio" name="city" value="SuZhou">苏州

1、获取选中的radio的值:
$("input[name='city']:checked").val();

使用元素选择器,再使用属性过滤器name='city',最后使用:checked选取被选中的元素。

2、给指定值的radio设置选中状态:

$("input[name='city'][value='YangZhou']").attr("checked",true);

给name="city"而且value="YangZhou"的radio设置选中状态。

3、取消name="city"的radio的选中状态:

$('input[name="city"]:checked').attr("checked",false);

4、获取name="city"的radio的个数:

$("input[name='city']").length;

5、获取name="city"而且索引是偶数的radio:

$("input[name='city']:even");

索引是从0开始的。

6、获取name="city"而且索引是奇数的radio:

$("input[name='city']:odd");

索引是从0开始的。

7、迭代radio:

$("input[name='city']").each(function(i,obj){ 
//i,迭代的下标,从0开始 
//obj,当前的对象(HTMLInputElement),可以使用obj.value格式获取属性值 
//$(this);当前jQuery对象,可以使用$(this).val()获取属性值 
});

迭代name="city"的radio。

8、禁用radio:

$("input[name='city']").attr("disabled",true);

禁用name="city"的radio。

9、启用radio:

$("input[name='city']").attr("disabled",false);

启用name="city"的radio。

Javascript 相关文章推荐
用 JavaScript 迁移目录
Dec 18 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
jQuery实现图片滑动效果
Mar 08 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 #Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 #Javascript
jQuery操作select的实例代码
Jun 14 #Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 #Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 #Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 #Javascript
基于jQuery的360图片展示实现代码
Jun 14 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
详解Node.js中的Async和Await函数
2018/02/22 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
《在家里》教后反思
2014/03/01 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
公务员诚信承诺书
2014/05/26 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
创业计划书之废品回收
2019/09/26 职场文书