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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
Javascript调用C#代码
Jan 17 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
php自定义hash函数实例
2015/05/05 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
Bootstrap select下拉联动(jQuery cxselect)
2017/01/04 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Django后台获取前端post上传的文件方法
2018/05/28 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
产品质量承诺范本
2014/03/31 职场文书
三好生演讲稿
2014/09/12 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP