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对象的支持
Jul 25 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
Vue extend的基本用法(实例详解)
Dec 09 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
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php自定义错误处理用法实例
2015/03/20 PHP
JavaScript的目的分析
2007/01/05 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
JavaScript类库D
2010/10/24 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
14个有用的Jquery技巧分享
2015/01/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
浅析js中substring和substr的方法
2015/11/09 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
python杀死一个线程的方法
2015/09/06 Python
Python数组定义方法
2016/04/13 Python
微信跳一跳游戏python脚本
2020/04/01 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Python实现12306火车票抢票系统
2019/07/04 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
百度软件工程师职位
2013/02/14 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
口腔医学技术应届生求职信
2013/11/09 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
培训班开班仪式主持词
2014/03/28 职场文书