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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 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
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
类似框架的js代码
2006/11/09 Javascript
Javascript 跨域访问解决方案
2009/02/14 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python logging.info在终端没输出的解决
2020/05/12 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
企业文化标语口号
2014/06/09 职场文书
应届生简历自我评价
2015/03/11 职场文书
推销搭讪开场白
2015/05/28 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python中requests做接口测试的方法
2021/05/30 Python
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis