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 相关文章推荐
JS之小练习代码
Oct 12 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js计算精度问题小结
Apr 22 Javascript
深入理解javascript的执行顺序
Apr 04 Javascript
AngularJS表单基本操作
Jan 09 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
Vuex的实战使用详解
Oct 31 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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/05/29 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
js实现转动骰子模型
2019/10/24 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
linux 下selenium chrome使用详解
2020/04/02 Python
解决Django no such table: django_session的问题
2020/04/07 Python
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
六一活动主持词
2015/06/30 职场文书
家访教师心得体会
2016/01/23 职场文书
何时使用Map来代替普通的JS对象
2021/04/29 Javascript
python 命令行传参方法总结
2021/05/25 Python