jquery 实现checkbox全选,反选,全不选等功能代码(奇数)


Posted in Javascript onOctober 24, 2012

设页面有如下一组复选框和几个相关按钮(全选,反选,全不选等):

<input type="checkbox" name="fruit" value="apple" />苹果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="全不选"> 
<input type="button" id="btn3" value="反选"> 
<input type="button" id="btn4" value="选中所有奇数"> 
<input type="button" id="btn5" value="获得选中的所有值">

则分别实现相关功能的完整代码如下:
$(function(){ 
$('#btn1').click(function(){//全选 
$("[name='fruit']").attr('checked','true'); 
}); 
$('#btn2').click(function(){//全不选 
$("[name='fruit']").removeAttr('checked'); 
}); 
$('#btn3').click(function(){//反选 
$("[name='fruit']").each(function(){ 
if($(this).attr('checked')){ 
$(this).removeAttr('checked'); 
}else{ 
$(this).attr('checked','true'); 
} 
}) 
}); 
$("#btn4").click(function(){//选中所有奇数 
$("[name='fruit']:even").attr('checked','true'); 
}) 
$("#btn5").click(function(){//获取所有选中的选项的值 
var checkVal=''; 
$("[name='fruit'][checked]").each(function(){ 
checkVal+=$(this).val()+','; 
}) 
alert(checkVal); 
}) 
});

注意使用 jquery 之前必须要引入 jquery 包哦!
Javascript 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
JavaScript数组复制详解
Feb 02 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 #Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 #Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 #Javascript
关于js new Date() 出现NaN 的分析
Oct 23 #Javascript
js Dialog 实践分享
Oct 22 #Javascript
JS控件的生命周期介绍
Oct 22 #Javascript
重写javascript中window.confirm的行为
Oct 21 #Javascript
You might like
PHP递归算法的详细示例分析
2013/02/19 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
thinkPHP数据查询常用方法总结【select,find,getField,query】
2017/03/15 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
JAVASCRIPT下判断IE与FF的比较简单的方式
2008/10/17 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python和node.js生成当前时间戳的示例
2020/09/29 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
后勤主管岗位职责
2014/03/01 职场文书
数字化校园建设方案
2014/05/03 职场文书
销售团队口号大全
2014/06/06 职场文书
大学生学习计划书
2014/09/15 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL