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 未结束的字符串常量常见解决方法
Jan 24 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
javascript中Number的方法小结
Nov 21 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 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
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
js模块加载方式浅析
2017/08/12 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
学校安全工作制度
2014/01/19 职场文书
中国世界遗产导游词
2015/02/13 职场文书
培训班开班主持词
2015/07/02 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
用Python写一个简易版弹球游戏
2021/04/13 Python
浅谈Java父子类加载顺序
2021/08/04 Java/Android