09-jQuery案例：爱好选择器
爱好选择器HTML
1 <!DOCTYPE html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Title</title>
5 <style>
6 * {
7 margin: 0;
8 padding: 0;
9 }
10
11 #tab li {
12 float: left;
13 list-style: none;
14 width: 80px;
15 height: 40px;
16 line-height: 40px;
17 cursor: pointer;
18 text-align: center;
19 }
20
21 #container {
22 position: relative;
23 }
24
25 #content1, #content2, #content3 {
26 width: 300px;
27 height: 100px;
28 padding: 30px;
29 position: absolute;
30 top: 40px;
31 left: 0;
32 }
33
34 #tab1, #content1 {
35 background-color: #ffcc00;
36 }
37
38 #tab2, #content2 {
39 background-color: #ff00cc;
40 }
41
42 #tab3, #content3 {
43 background-color: #00ccff;
44 }
45 </style>
46 </head>
47 <body>
48 <form>
49 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
50
51 <br/>
52 <input type="checkbox" name="items" value="足球"/>足球
53 <input type="checkbox" name="items" value="篮球"/>篮球
54 <input type="checkbox" name="items" value="羽毛球"/>羽毛球
55 <input type="checkbox" name="items" value="乒乓球"/>乒乓球
56 <br/>
57 <input type="button" id="checkedAllBtn" value="全 选"/>
58 <input type="button" id="checkedNoBtn" value="全不选"/>
59 <input type="button" id="checkedRevBtn" value="反 选"/>
60 <input type="button" id="sendBtn" value="提 交"/>
61 </form>
62
63 <script type="text/javascript" src="jquery-1.12.4.js"></script>
64 <script>
65 $(function(){
66 /*
67 功能说明:
68 1. 点击'全选': 选中所有爱好
69 2. 点击'全不选': 所有爱好都不勾选
70 3. 点击'反选': 改变所有爱好的勾选状态
71 4. 点击'提交': 提示所有勾选的爱好
72 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
73 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
74 */
75 var $items = $(':checkbox[name=items]');
76 // 1. 点击'全选': 选中所有爱好
77 $('#checkedAllBtn').click(function(){
78 $items.each(function () {
79 $(this).prop('checked',true);
80 })
81 $('#checkedAllBox').prop('checked',true);
82 });
83
84 // 2. 点击'全不选': 所有爱好都不勾选
85 $('#checkedNoBtn').click(function () {
86 $items.each(function () {
87 $(this).prop('checked',false);
88 })
89 $('#checkedAllBox').prop('checked',false);
90 });
91
92 // 3. 点击'反选': 改变所有爱好的勾选状态 只有当所有item都是选中的状态时，才选中checkAllBox
93 $('#checkedRevBtn').click(function(){
94 $items.each(function () {
95 this.checked = !this.checked;
96 });
97 if($items.filter(':checked')){
98 $('#checkedAllBox').prop('checked',$items.not(':checked').length === 0);
99 }
100 })
101 // 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
102 $('#checkedAllBox').click(function () {
103 $items.prop('checked',this.checked);
104 })
105 // 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
106 $items.click(function () {
107 $('#checkedAllBox').prop('checked',$items.not(':checked').size()===0);
108 })
109
110 // 6. 点击'提交': 提示所有勾选的爱好
111 $('#sendBtn').click(function () {
112 $items.filter(':checked').each(function(){
113 console.log($(this).val());
114 })
115 })
116 })
117 </script>
118 </body>
119 </html>
09-jQuery案例：爱好选择器的更多相关文章
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- JQuery：JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
- jQuery的筛选选择器
基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...
随机推荐
- 达梦产品技术支持-DM8-数据库安装
(该文档只适合个人环境搭建,未涉及到数据库的各种参数配置,未涉及到数据库规划,若需要企业环境搭建请咨询专业人员) 基于Windows的安装 windows下安装是图形化界面,与linux下的图形化界面 ...
- 3-kubernetes监控与日志管理
监控集群资源利用率 metrics-server是一个集群范围的资源使用情况的数据聚合器,作为一个应用部署在集群中 metrics-server从每个节点上kubelet API收集指标,通过kube ...
- 对lambda表达式的字节码实现个人理解 - 简单描述
暂且抛开具体的代码实现,谈谈个人的理解. 常规的方法调用,具体由哪条指令来执行,实际都是在JVM的规则中就定下来了,比如构造方法使用invokeSpecial,静态方法使用invokeStatic.现 ...
- 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）
我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...
- S3C6410 LCD驱动分析（转）
一. 理论分析1. 几个概念:FIMC : Fully Interactive Mobile Camera (完全交互式移动摄像机)FIMD: Fully Interactive Mob ...
- 多测师讲解 ———python2和Python3区别
python3.x和python2.x的区别:1.Python3.X源码文件默认使用utf-8编码,而python2.x的编译最前端需要加上#coding=utf-82.python3.x里打印pri ...
- win10的cortana搜索显示空白
解决方法:重置应用 问题原因:待查明 然后,我们往下拉
- Windows Server 2003 Enterprise Edition SP2
SN: MPQ6X-3MCCF-47H9T-TKC2F-T69WM
- vscode配置python调试仍然直接输出
工作目录不能放在python的安装目录下
- tr命令-转换和删除字符
tr 转换和删除字符 支持标准输入 格式 tr [OPTION]...SET1[SET2] Translate, squeeze, and/or delete characters from stan ...