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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
SVG实现时钟效果
Jul 17 Javascript
小程序实现五星点评效果
Nov 03 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
React forwardRef的使用方法及注意点
Jun 13 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 array_multisort()函数的使用札记
2011/07/03 PHP
php模拟post提交数据的方法
2015/02/12 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP强制转化的形式整理
2020/05/22 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
Python通过select实现异步IO的方法
2015/06/04 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
小组口号大全
2014/06/09 职场文书
药剂专业求职信
2014/06/20 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
团干部培训班心得体会
2016/01/06 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Python IO文件管理的具体使用
2022/03/20 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers