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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
javascript三种代码注释方法
Jun 02 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
Sep 08 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
微信小程序实现watch监听
Jun 04 Javascript
JavaScript 对象创建的3种方法
Nov 17 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/04/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php 判断数组是几维数组
2013/03/20 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
详解vue中axios的封装
2018/07/18 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
python中requests库session对象的妙用详解
2017/10/30 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python configparser模块应用过程解析
2020/08/14 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
成功的酒店创业计划书
2013/12/27 职场文书
40岁生日感言
2014/02/15 职场文书
经典广告词大全
2014/03/14 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
讲解MySQL增删改操作
2022/05/06 MySQL