JQuery radio(单选按钮)操作方法汇总


Posted in Javascript onApril 15, 2015

随着Jquery的作用越来越大,使用的朋友也越来越多。在Web中,由于CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快,代码的写法也改变了许多,以下Jquery代码适query1.4版本以上。

JQuery radio(单选按钮)操作方法汇总

1.获取选中值,三种方法都可以:

$('input:radio:checked').val();

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

2.设置第一个Radio为选中值:
    $('input:radio:first').attr('checked', 'checked');

或者
$('input:radio:first').attr('checked', 'true');

注:attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

3.设置最后一个Radio为选中值:

$('input:radio:last').attr('checked', 'checked');

或者
$('input:radio:last').attr('checked', 'true');

4.根据索引值设置任意一个radio为选中值:
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....

或者
$('input:radio').slice(1,2).attr('checked', 'true');

5.根据Value值设置Radio为选中值
$("input:radio[value='rd2']").attr('checked','true');

或者
$("input[value='rd2']").attr('checked','true');

6.删除Value值为rd2的Radio
$("input:radio[value='rd2']").remove();

7.删除第几个Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....

如删除第3个Radio:$("input:radio").eq(2).remove();

8.遍历Radio

$('input:radio').each(function(index,domEle){
     //写入代码
});
Javascript 相关文章推荐
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 #Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 #Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 #Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 #Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 #Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 #Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
You might like
介绍php设计模式中的工厂模式
2008/06/12 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python学习必备知识汇总
2017/09/08 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
python模块导入的方法
2019/10/24 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
python中property和setter装饰器用法
2019/12/19 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS