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 相关文章推荐
jquery ajax abort()的使用方法
Oct 28 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
JavaScript实现横版菜单栏
Mar 17 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
星际实力自我测试
2020/03/04 星际争霸
一个分页的论坛
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python解析树及树的遍历
2016/02/03 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
汇智创新科技发展有限公司
2015/12/06 面试题
行政前台岗位职责
2013/12/04 职场文书
幸福中国演讲稿
2014/09/12 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
信息技术研修心得体会
2016/01/08 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
再谈python_tkinter弹出对话框创建
2022/03/20 Python