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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
AngularJS转换响应内容
Jan 27 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 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/10/09 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php获取远程文件大小
2015/10/20 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python中property和setter装饰器用法
2019/12/19 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
办公室助理岗位职责
2013/12/25 职场文书
导师评语大全
2014/04/26 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
高中生综合素质自我评价
2015/03/06 职场文书