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 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 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 无线电
php json转换成数组形式代码分享
2014/11/10 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
JavaScript实现两个select下拉框选项左移右移
2017/03/09 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现360的字符显示界面
2014/02/21 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
为什么使用接口?
2014/08/13 面试题
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
股东出资证明书范例
2014/10/04 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL