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 动态创建VML的方法
Oct 14 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
May 25 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
用JS创建一个录屏功能
Nov 11 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与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
对Python强大的可变参数传递机制详解
2019/06/13 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
日语专业个人的求职信
2013/12/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
研讨会通知
2015/04/27 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
同乡会致辞
2015/07/30 职场文书
小学班级标语口号大全
2015/12/26 职场文书
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript