jquery写个checkbox——类似邮箱全选功能


Posted in Javascript onMarch 19, 2013

以前用原生 JS 写过 checkbox——类似邮箱全选功能,点击这里。最近在学习jquery,今天抽空用jquery 写个checkbox——类似邮箱全选功能。

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>checkbox</title> 
</head> 
<body> 
<input type="checkbox" name="btn" id="btn"/><label for="btn">全选/全不选</label><br/> 
<input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/> 
<input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/> 
<input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/> 
<input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/> 
<input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/> 
<input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/> 
<input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/> 
<input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/> 
<input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/> 
<input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/> 
<a href="javascript:;" id="btn2">反选</a> 
</body> 
</html> 
<script type="text/javascript" src="/js/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var checkboxes = $('input[name=choose]'); 
var btn = $('#btn'); 
var btn2 = $('#btn2'); 
btn.click(function(){ 
checkboxes.attr('checked',this.checked); 
}); 
checkboxes.click(function(){ 
var flag = true; 
checkboxes.each(function(){ 
if(!this.checked) flag = false; 
}); 
btn.attr('checked',flag); 
}); 
btn2.click(function(){ 
var flag = true; 
checkboxes.each(function(){ 
this.checked = !this.checked; 
if(!this.checked) flag = false; 
}); 
btn.attr('checked',flag); 
}); 
}); 
</script>

小提示:如果使用 jquery,则需要引入 jquery 库。
PS:以上是本人通过所学的 jquery 知识,随意写的一些效果。
Javascript 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 #Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 #Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 #Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 #Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 #Javascript
Javascript中valueOf与toString区别浅析
Mar 19 #Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 #Javascript
You might like
php实现多城市切换特效
2015/08/09 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
2019/09/06 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
python制作抖音代码舞
2019/04/07 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python代码太长换行的实现
2019/07/05 Python
django将数组传递给前台模板的方法
2019/08/06 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
护理学毕业生求职信
2013/11/14 职场文书
工作个人的自我评价
2014/01/14 职场文书
企业形象策划方案
2014/05/29 职场文书
学位证书委托书
2014/09/30 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
MySQL创建管理RANGE分区
2022/04/13 MySQL
使用refresh_token实现无感刷新页面
2022/04/26 Javascript
Fluentd搭建日志收集服务
2022/09/23 Servers