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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
使用jquery 简单实现下拉菜单
Jan 14 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
layui导出所有数据的例子
Sep 10 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php实现的操作excel类详解
2016/01/15 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
js+css在交互上的应用
2010/07/18 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
基于Python实现粒子滤波效果
2020/12/01 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
车辆挂靠协议书
2016/03/23 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL