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简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
使用vue构建多页面应用的示例
Oct 22 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
PHP4引用文件语句的对比
2006/10/09 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
让焦点自动跳转
2006/07/01 Javascript
ie 调试javascript的工具
2009/04/29 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
python实现三维拟合的方法
2018/12/29 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
槐乡的孩子教学反思
2014/04/27 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
导游词之吉林花园山
2019/10/17 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书