JQuery操作单选按钮以及复选按钮示例


Posted in Javascript onSeptember 23, 2013

单选按钮以及复选按钮在开发过程中会经常用到,下面我就来通过JQuery操作单选按钮和复选按钮:

单选按钮:

通过JQuery获取单选按钮对象我们总共有三种途径:

①ID:$("#radioId")

②NAME:$(":input[name='radioName']")

③TYPE:$("input[type=radio]"),可能在有的资料上面写的是:$(""input[@type=radio]""),这个的话跟你的JQuery版本有关系,如果是老版本的话就用后者,新版本就用前者,如果不知道自己的版本到底适合用哪一个的话就挨个试,反正一次尝试就能搞定,而且还能学到知识,何乐而不为呢!

我们都知道,在一组单选按钮当中只能使一个生效,要实现这种效果,很多人可能会认为把ID改为相同的就可,其实,你去尝试一下就会知道,在一组单选按钮中仍然可以选用多个。因为,实现此效果的关键属性不是ID,而是NAME。

介绍完了之后,我们投入到只用当中吧:

我们获取完单选按钮的对象之后,就得对此对象进行遍历,因为,此对象的类型是一个数组,我们要挨个对其进行判断是否被选中,然后再从选中的按钮中取出所需要的值,示例代码如下:

var itemradio = $("input[type=radio]"); 
result=""; 
nums = itemradio.length; 
for(i=0;i<nums;i++) { 
if(itemradio[i].checked){ 
result = itemradio[i].value+","+itemradio[i].id+";"+result; 
} 
}

result就是我想获取的值,前面那个value可能大家会看得懂,而后面那个ID有的人可能会犯迷糊。在此,我就进行一下扩展:在JS中所有的对象都可以直接通过“.”来获取属性的值。

复选框:

关于复选框,我们需要的只是“全选和反选”的效果,使用JQuery的话只要一句话就可以搞定,如下:

var checkedObj = $('input:checkbox[name="checkbox"]:checked'); 
var values = ""; 
checkedObj.each(function() { 
var value=this.value + ","; 
values += value; 
});

好啦,通过上面的两段代码你就可以操作复选框和单选按钮啦!
Javascript 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
js实现返回顶部效果
Mar 10 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 #Javascript
js如何取消事件冒泡
Sep 23 #Javascript
页面载入结束自动调用js函数示例
Sep 23 #Javascript
往光标所在位置插入值的js代码
Sep 22 #Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 #Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 #Javascript
JS 毫秒转时间示例代码
Sep 22 #Javascript
You might like
Laravel 加载第三方类库的方法
2018/04/20 PHP
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
四年级学生评语大全
2014/04/21 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
学期个人自我总结
2015/02/13 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL