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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
JavaScript实现世界各地时间显示
Sep 07 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
PHP个人网站架设连环讲(二)
2006/10/09 PHP
php的memcached客户端memcached
2011/06/14 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
php支付宝APP支付功能
2020/07/29 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
python利用hook技术破解https的实例代码
2013/03/25 Python
python利用datetime模块计算时间差
2015/08/04 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
三年级班级文化建设方案
2014/05/04 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
Golang获取List列表元素的四种方式
2022/04/20 Golang