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 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
动态加载js文件简单示例
Apr 21 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
浅析VUE防抖与节流
Nov 24 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
JS分页的实现(同步与异步)
2017/09/16 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
浅谈node的事件机制
2017/10/09 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
小程序文字跑马灯效果
2018/12/28 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
使用python Django做网页
2013/11/04 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python学习笔记之装饰器
2020/08/06 Python
python 实现客户端与服务端的通信
2020/12/23 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
管理失职检讨书
2015/05/05 职场文书
老员工辞职信范文
2015/05/12 职场文书
通用员工手册范本
2015/05/14 职场文书
被告代理词范文
2015/05/25 职场文书
工作证明书
2015/06/15 职场文书
初一语文教学反思
2016/03/03 职场文书
六年级作文之预言作文
2019/10/25 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
css3 选择器
2022/05/11 HTML / CSS