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 ...
随机推荐
- ubuntu20 使用命令安装 redis
安装 redis sudo apt-get install redis-server -y 配置文件 vi /etc/redis/redis.conf # 设置端口 port # 设置密码 requi ...
- 多测师讲解_ 高级自动化测试selenium_001基本学习
高级自动化测试python+selenium教程手册 --高级讲师肖sir 第 1 章webdriver 环境搭建好了,我们正式学习 selenium 的 webdriver 框架,它不像 QTP 之 ...
- ABAP分享十： 文件的上传 方法一
前提条件:PARAMETERS P_files TYPE RLGRAP-FILENAME. AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_files.一.文件的 ...
- Hugo+Github 搭建个人博客（Windows环境下）
目录 Hugo+Github 搭建个人博客(Windows环境下) 1.前言 2.Differences 2.1 https vs SSH 2.2 新建的github的仓库名必须为 用户名+githu ...
- 技术债！ 怎样简洁高效的实现多个 Enum 自由转换
一:背景 1. 讲故事 前段时间和同事负责一个项目的两个业务模块,可能大家缺少沟通,导致本该定义一个 Enum 的地方结果我俩各自定义了一个,导致后面这两个 Enum 进行对接就烦了,为了方便理解,也 ...
- Java中<?>，<? extends E>，<? super E>
在集合中,经常可看到<?>,<? extends E>,<? super E>,它们都是属于泛型: <?>: 是泛型通配符,任意类型,如果没有明确,那么 ...
- Hibernate关系映射之many-to-many(多对多)
在表设计中,我们一般都会考虑表与表之间的关系,现在我来介绍一下表与表之间的几种对应关系many-to-many 多对多 比如一个用户可以有多种角色 一种角色可以对用多个不同的用户所以角色和用户之间的关 ...
- python自测100题
如果你在寻找python工作,那你的面试可能会涉及Python相关的问题. 通过对网络资料的收集整理,本文列出了100道python的面试题以及答案,你可以根据需求阅读测试.如果你看了还是不懂可以加我 ...
- sentinel控制台与应用通信原理
1,应用程序配置中的port选项用于指定在应用端启动的http server的端口,默认8719 sentinel: transport: dashboard: localhost:8080 port ...
- .NET CORE 3.1.5 跨域设置
1.Startup配置 1 #region 跨域设置 2 //注意:放到services.AddMvc()之前 3 services.AddCors(options => { 4 options ...