-
使用和说明:
复制代码
1init_checkbox_state()初始化显示功能;
复制代码
1function checkbox_run(that, style_state)点击某个switch后运行功能;
复制代码
1data-checkbox_state="checked" data-style_state="on"开启状态;
复制代码
1data-checkbox_state="unchecked" data-style_state="off"关闭状态;
复制代码
1data-checkbox_state="disabled" data-style_state="disabled"不可用状态;
复制代码
1id=checkbox-item-xxx和for=checkbox-item-xxx这个需要每个switch都不一样,同一个switch相同。
-
效果:
代码下载:
https://download.csdn.net/download/weixin_41827162/12500924
备用下载:https://makeoss.oss-cn-hangzhou.aliyuncs.com/checkbox2.7z
最终源码还是根据实际情况发挥使用。
html
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<!--开始 checkbox--> <!--checkbox--> <span><input class="checkbox-btn" data-checkbox_state="checked" data-style_state="on" type="checkbox" id="checkbox-item-1" onclick="click_checkbox(this, checkbox_run, 'key1', 'value1')" /><label for="checkbox-item-1"></label></span> <span><input class="checkbox-btn" data-checkbox_state="unchecked" data-style_state="off" type="checkbox" id="checkbox-item-2" onclick="click_checkbox(this, checkbox_run, 'key2', 'value2')" /><label for="checkbox-item-2"></label></span> <span><input class="checkbox-btn" data-checkbox_state="disabled" data-style_state="disabled" type="checkbox" id="checkbox-item-3" onclick="click_checkbox(this, checkbox_run, 'key3', 'value3')" /><label for="checkbox-item-3"></label></span> <!--依赖--> <link href="./checkbox/checkbox.css" rel="stylesheet" type="text/css"/> <script src="./checkbox/checkbox.js"></script> <!--运行--> <script> // 初始化已知checkbox init_checkbox_state(); // 点击switch开关后的其他操作 function checkbox_run(that, style_state) { console.log([that, style_state]); // 点击后的其他操作 } </script> <!--结束 checkbox-->
-
复制代码
1checkbox.js
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64// 改变checkbox状态 function change_checkbox_state(ele, _checkbox_state, _style_state) { // disabled不可操作、checked已选中、unchecked不选中 let white_state = ["checked", "disabled", "unchecked"]; // 校验白名单 let checkbox_state = ""; if (white_state.includes(_checkbox_state)){ checkbox_state = _checkbox_state; }else { console.log('checkbox_state值仅可取四个值:' + JSON.stringify(white_state) + "。默认checked"); checkbox_state = "checked"; } // 赋值 let next_checkbox_state = ""; let next_style_state = ""; if (checkbox_state === "checked"){ next_checkbox_state = "unchecked"; next_style_state = "off"; }else if(checkbox_state === "unchecked"){ next_checkbox_state = "checked"; next_style_state = "on"; }else if (checkbox_state === "disabled") { next_checkbox_state = "disabled"; next_style_state = "disabled"; }else { // 默认关闭 next_checkbox_state = "unchecked"; next_style_state = "off"; } // 更新参数 ele.setAttribute("data-checkbox_state", next_checkbox_state); ele.setAttribute("data-style_state", next_style_state); ele.setAttribute(checkbox_state, checkbox_state); } // 点击某个checkbox function click_checkbox(that, call_func, key, value) { // on打开,off关闭,disabled不可用 let white_style_state = ["on", "off", "disabled"]; let checkbox_state = that.getAttribute("data-checkbox_state"); let style_state = that.getAttribute("data-style_state"); if (!white_style_state.includes(style_state)){ console.log('style_state值仅可取值:' + JSON.stringify(white_style_state) + "。默认为off"); style_state = "off"; } change_checkbox_state(that, checkbox_state, style_state); try { call_func(that, style_state, key, value); }catch (e) { console.error("未设置回调函数:checkbox_run(that, style_state, key, value)"); } } // 初始化checkbox function init_checkbox_state() { let checkbox = document.getElementsByClassName("checkbox-btn"); for (let i=0; i<checkbox.length; i++){ let ele = checkbox[i]; let the_checkbox_state = ele.getAttribute("data-checkbox_state"); let the_style_state = ele.getAttribute("data-style_state"); change_checkbox_state(ele, the_checkbox_state, the_style_state); } } // (function () { // init_checkbox_state(); // })();
-
复制代码
1checkbox.css
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74input[type="checkbox"] { display: none; } input[type="checkbox"] + label { cursor: pointer; font-size: 14px; } /* ==================================================================== */ /* CHECKBOX TYPE 10 ---------------------------------------------------- */ /* ==================================================================== */ [id^="checkbox-item-"] + label { background-color: #fafbfa; padding: 9px; border-radius: 50px; display: inline-block; position: relative; margin-right: 30px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; width: 40px; height: 15px; } [id^="checkbox-item-"] + label:after { content: ' '; position: absolute; top: 0; -webkit-transition: box-shadow 0.1s ease-in; transition: box-shadow 0.1s ease-in; left: 0; width: 100%; height: 100%; border-radius: 100px; box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4); } [id^="checkbox-item-"] + label:before { content: ' '; position: absolute; background: white; top: 1px; left: 1px; z-index: 999999; width: 31px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in; height: 31px; border-radius: 100px; box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3); } [id^="checkbox-item-"]:active + label:after { box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee; } [id^="checkbox-item-"]:active + label:before { width: 37px; } [id^="checkbox-item-"]:checked:active + label:before { width: 37px; left: 20px; } [id^="checkbox-item-"] + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } [id^="checkbox-item-"]:checked + label:before { content: ' '; position: absolute; left: 26px; border-radius: 100px; } [id^="checkbox-item-"]:checked + label:after { content: ' '; font-size: 1.5em; position: absolute; background: #4cda60; box-shadow: 0 0 1px #4cda60; }
-
最后
以上就是殷勤大侠最近收集整理的关于纯js写的一个switch开关(或叫checkbox开关)的全部内容,更多相关纯js写内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复