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 相关文章推荐
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
AngularJS中的模块详解
Jan 29 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
jquery滚动特效集锦
Jun 03 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
如何在微信小程序中存setStorage
Dec 13 Javascript
JavaScript获取时区实现过程解析
Sep 24 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实现的分页类定义与用法示例
2017/07/05 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
python 列表推导式使用详解
2019/08/29 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
控制工程专业个人求职信
2013/09/25 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
考试退步检讨书
2014/01/15 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
自主招生教师推荐信
2014/05/10 职场文书
学籍证明模板
2014/11/21 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
MySQL学习之基础命令实操总结
2022/03/19 MySQL
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL