09-jQuery案例：爱好选择器
2024-09-08 03:05:15
爱好选择器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>
最新文章
- mono -图片处理
- 关于纠正 C/C++ 之前在函输内改变 变量的一个错误想法。
- 1010. Radix (25)（未完成）
- template.js遍历对象的写法
- Linux Basic --- The First Character in The File Properity
- web兼容性测试
- Hadoop的HA集群启动和停止流程
- Android获取图片资源的4种方式
- 第一次div1做出3道题
- js正則表達式语法
- 协程coroutine
- hdu 4289 最小割，分拆点为边
- C# OR/Mapping 数据处理模式学习
- [译]Stairway to Integration Services Level 9 - Control Flow Task Errors
- python初识1
- Kubenetes 资源清单定义入门
- Oracle的 listagg() WITHIN GROUP ()函数使用
- [Z] C#程序中设置全局代理(Global Proxy)
- #WEB安全基础 : HTTP协议 | 0x4 各种协议与HTTP协议的关系(一个报文的旅行)
- [leetcode]29. Divide Two Integers两整数相除