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 相关文章推荐
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js子页面获取父页面数据示例
May 15 Javascript
深入理解React中es6创建组件this的方法
Aug 29 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js用类封装pop弹窗组件
2017/10/08 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python中转换角度为弧度的radians()方法
2015/05/18 Python
python图像处理入门(一)
2019/04/04 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
大学校园毕业自我鉴定
2014/01/15 职场文书
临床护理求职信
2014/04/26 职场文书
交通安全温馨提示语
2015/07/14 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL