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 ...
随机推荐
- 通用redis
import lombok.extern.slf4j.Slf4j;import org.apache.poi.ss.formula.functions.T;import org.rcisoft.cor ...
- RHSA-2017:2473-重要: 内核 安全和BUG修复更新（需要重启、存在EXP、本地提权）
[root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.2.1511 (Core) 修复命令: 使用root账号登陆She ...
- spring redis 配置
- 多测试讲解_009肖sirRF自动化框架安装教程
robot framework:自动化测试框架 Python3.7 RIDE(可视化界面). Wxpython pip(在线下载) . setuptools(在线安装) . 第三方库 第三方库:s ...
- gitlab 拉代码提示：Your Account has been blocked. fatal: Could not read from remote repository. 最佳解决方案
今天在脚本服务器上拉取代码,突然发现拉不了代码了,提示: GitLab: Your account has been blocked. fatal: Could not read from remot ...
- Go语言基础知识01-用Go打个招呼
每一种编程语言,从读一本好书开始 每一种编程语言,也从Helloworld开始 1. 环境准备 1.1 安装golang 在Ubuntu下,直接输入命令可以安装最新版本: $ sudo apt-get ...
- CTSC2010
星际旅行 https://www.luogu.com.cn/problem/P4189 题目:且每个星球的\(H_i\)大于等于与该星球直接相连的星球数(即度数). 想到先从根到所有点都走一遍,然后贪 ...
- centos8安装kafka(单机方式)
一,下载kafka 1,官网地址 http://kafka.apache.org/downloads.html 2,下载 [root@localhost source]# wget http://mi ...
- MySQL数据库基础-3
SQL语言 结构化的查询云烟 有国际标准. 非常容易学习的,关注数据本身,类似于shell SQL解释器 命令行效率比较高 应用编程接口 ODBC:Open Database Connectivity ...
- webpack5文档解析(下)
声明:所有的文章demo都在我的仓库里 代码分离 代码分离的有点在于: 切割代码,生成不同的打包文件,按需加载这些文件. 每个bundle的体积更小 控制外部资源的加载顺序 常用的方法有: 入口起点: ...