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 相关文章推荐
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php header示例代码(推荐)
2010/09/08 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php中switch语句用法详解
2015/08/17 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python获取图片颜色信息的方法
2015/03/18 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
shell程序中如何注释
2012/01/28 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
《口技》教学反思
2014/02/21 职场文书
新年联欢会主持词
2014/03/27 职场文书
健康家庭事迹材料
2014/05/02 职场文书
委托函范文
2015/01/29 职场文书
《狼牙山五壮士》教学反思
2016/02/17 职场文书
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers