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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
js实现文本框选中的方法
May 26 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
回顾Javascript React基础
Jun 15 Javascript
用VsCode编辑TypeScript的实现方法
May 07 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP中的正规表达式(二)
2006/10/09 PHP
php防盗链的常用方法小结
2010/07/02 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
python路径的写法及目录的获取方式
2019/12/26 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
服装机修工岗位职责
2013/12/26 职场文书
竞选演讲稿范文
2013/12/28 职场文书
少先队入队活动方案
2014/02/08 职场文书
班长自荐书范文
2014/02/11 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
浅析Django接口版本控制
2021/06/26 Python
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python