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 相关文章推荐
Javascript 读后台cookie代码
Sep 15 Javascript
javascript this用法小结
Dec 19 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
VueJS全面解析
2016/11/10 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python解析nginx日志文件
2015/05/11 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python3下pygame如何实现显示中文
2020/01/11 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
python 用struct模块解决黏包问题
2020/11/07 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
金融学专科生自我鉴定
2014/02/21 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
党的作风建设心得体会
2014/10/22 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang