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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
通过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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
Javascript面向对象编程
2012/03/18 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python生成指定长度的随机数密码
2014/01/23 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
开业庆典邀请函
2014/01/08 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
数学国培研修感言
2014/02/13 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
合作合同协议书范本
2015/01/27 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
人代会简报
2015/07/21 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis