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 一次处理多个ajax请求的代码
Sep 02 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
vue router 用户登陆功能的实例代码
Apr 24 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
ftp类(example.php)
2006/10/09 PHP
PHP print类函数使用总结
2010/06/25 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
动手学习无线电
2021/03/10 无线电
javascript中的继承实例代码
2011/04/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python opencv之分水岭算法示例
2018/02/24 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
成人教育自我鉴定
2013/11/01 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
校园活动宣传方案
2014/03/28 职场文书
二年级学生评语大全
2014/04/23 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
初中物理教学反思
2016/02/19 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL