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 相关文章推荐
删除select中所有option选项jquery代码
Aug 12 Javascript
js判断浏览器是否支持html5
Aug 17 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
JavaScript File分段上传
Mar 10 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 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面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
python strip()函数 介绍
2013/05/24 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python字典与json转换的方法总结
2020/12/28 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
部队2014年终工作总结
2014/11/27 职场文书
会计入职心得体会
2016/01/22 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
美元符号 $
2022/02/17 杂记
分享几种python 变量合并方法
2022/03/20 Python