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不同页面传值的改进版
Sep 30 Javascript
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
浅谈js的异步执行
Oct 18 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
菜鸟修复电子管记
2021/03/02 无线电
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python 处理文件的几种方式
2019/08/23 Python
PyTorch中permute的用法详解
2019/12/30 Python
django迁移文件migrations的实现
2020/03/31 Python
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
村级换届选举方案
2014/05/10 职场文书
海洋科学专业求职信
2014/08/10 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
小学英语听课心得体会
2016/01/14 职场文书
检讨书之工作不认真
2019/08/14 职场文书
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB