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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
C++中的string类的用法小结
Aug 07 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 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
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python3利用Socket实现通信的方法示例
2019/05/06 Python
python的pstuil模块使用方法总结
2019/07/26 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
python实现大量图片重命名
2020/03/23 Python
Numpy之reshape()使用详解
2019/12/26 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python zip()函数的使用示例
2020/09/23 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
实习老师离校感言
2014/02/03 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
个人廉洁自律总结
2015/03/06 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书