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中的Document文档对象
Jan 16 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
浅谈JavaScript 声明提升
Sep 14 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中的观察者模式
2010/03/24 PHP
基于PHP文件操作的详解
2013/06/05 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
jquery得到font-size属性值实现代码
2013/09/30 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Bootstrap模态框案例解析
2017/03/05 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python实现k-means聚类算法
2018/02/23 Python
python发送告警邮件脚本
2018/09/17 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Python列表解析操作实例总结
2020/02/26 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
优秀求职自荐信怎样写
2013/12/18 职场文书
访谈节目策划方案
2014/05/15 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
公司催款律师函
2015/05/27 职场文书
二十年同学聚会感言
2015/07/30 职场文书
四十九个javascript小知识实用技巧
2021/11/20 Javascript