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 相关文章推荐
JQuery 浮动导航栏实现代码
Aug 27 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
纯javascript版日历控件
Nov 24 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
Angular2 组件间通过@Input @Output通讯示例
Aug 24 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
索趣科技的答案
2007/02/07 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python复制与引用用法分析
2015/04/08 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python和c语言的主要区别总结
2019/07/07 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
如何基于python实现不邻接植花
2020/05/01 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python collections模块的使用
2020/10/16 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
建筑个人求职信范文
2014/01/25 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
经典演讲稿汇总
2014/05/19 职场文书
明星员工获奖感言
2014/08/14 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python