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并非所有的一切都是对象
Apr 11 Javascript
js opener的使用详解
Jan 11 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
ES6 十大特性简介
Dec 09 Javascript
vue实现登录功能
Dec 31 Vue.js
通过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如何调用webservice应用介绍
2012/11/24 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
Python输出各行命令详解
2018/02/01 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
护校行动方案
2014/05/31 职场文书
经典团队口号
2014/06/06 职场文书
校园元旦活动总结
2014/07/09 职场文书
大学生个人总结范文
2015/02/15 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技