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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JS实现图片切换特效
Dec 23 Javascript
vue实现购物车加减
May 30 Javascript
vant时间控件使用方法详解
Dec 24 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实现mysql同步的实现方法
2009/10/21 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php实现字符串翻转的方法
2015/03/27 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
Python 文件操作实现代码
2009/10/07 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python中turtle库的使用实例
2019/09/09 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
《小池塘》教学反思
2014/02/28 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
导游词开场白
2015/01/31 职场文书
小学教师教学反思
2016/02/24 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS