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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery对指定元素中指定字符串进行替换的方法
Mar 17 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
原生JS实现记忆翻牌游戏
Jul 31 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
WordPress网站性能优化指南
2015/11/18 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
用python实现的线程池实例代码
2018/01/06 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
幼儿园教师备课制度
2014/01/12 职场文书
在校生自我鉴定
2014/01/23 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL