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 相关文章推荐
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 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(8) php 数组
2010/03/05 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php读取csc文件并输出
2015/05/21 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
微信JS接口大全
2016/08/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Python实现的几个常用排序算法实例
2014/06/16 Python
PyQt5每天必学之布局管理
2018/04/19 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
.NET笔试题(20个问题)
2016/02/02 面试题
中医临床专业自我鉴定范文
2014/01/15 职场文书
给面试官的感谢信
2014/02/01 职场文书
婚礼主持词开场白
2014/03/13 职场文书
食品安全承诺书范文
2014/08/29 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
python四种出行路线规划的实现
2021/06/23 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL