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 ...
随机推荐
- 【题解】SAC E#1 - 一道难题 Tree
Problem is here \(\text{Solution:}\) 首先,一眼看出这是最小割,只要叶子节点对汇点\(T\)连接流量为\(inf\)的边就可以一遍最大流搞定了. 剩下的问题在于,如 ...
- ASP。使用依赖注入的asp.net Core 2.0用户角色库动态菜单管理
下载source code - 2.2 MB 介绍 在开始这篇文章之前,请阅读我的前一篇文章: 开始使用ASP.NET Core 2.0身份和角色管理 在上一篇文章中,我们详细讨论了如何使用ASP.N ...
- golang RSA2加密/解密
$go get github.com/wenzhenxi/gorsa test.go文件的内容 运行: $go run test.go package main import ( "fmt& ...
- GC调优-XX:PrintGCDetails深度解析
查看程序运行GC的运行情况 资源充足的GC情况 新生代 老年代 元空间 因为现在资源充足没有发生GC *案例:将JVM初始化内存与最大内存(防止内存抖动,反复GC)调至10m,new一个50m的数组对 ...
- set的运用 例题5-3 安迪的第一个字典（Andy's First Dictionary，Uva 10815）
#include<bits/stdc++.h>using namespace std;set<string> dict;int main(){ string s, buf; w ...
- pytest文档42-fixture参数化params
前言 参数化是自动化测试里面必须掌握的一个知识点,用过 unittest 框架的小伙伴都知道使用 ddt 来实现测试用例的参数化. pytest 测试用例里面对应的参数可以用 parametrize ...
- 【C语言C++编程入门】——编译机制和语言标准！
编程机制 编写程序时必须遵循确切步骤主要是取决于你的计算机环境.因为 C语言是可以移植的,所以它在许多环境中可用,其中包括 UNIX,Linux,Windows等等 . 不过,让我们首先来看一看许多环 ...
- 【KM算法】UVA 11383 Golden Tiger Claw
题目大意 给你一个\(n×n\)的矩阵G,每个位置有一个权,求两个一维数组\(row\)和\(col\),使\(row[i] + col[j]\ge G[i][j]\),并且\(∑row+∑col\) ...
- 实时离线一体化在资产租赁saas服务中使用
流水查询需求 需求第一期: 基于TB级的在线数据,支持缴费帐单明细在线查询.大家都知道,像银行帐单流水一样,查几年的流水是常有的事. 支持的维度查询:帐期.欠费状态.日期范围.费用科目类型.房屋分类. ...
- java 实体对象转Map公共类
java 实体对象转Map公共类 package org.kxtkx.portal.utils; import java.lang.reflect.Field; import java.util.Ha ...