纯js写的一个switch开关（或叫checkbox开关）

43 阅读 0 评论 29 点赞

我是靠谱客的博主殷勤大侠，最近开发中收集的这篇文章主要介绍纯js写的一个switch开关（或叫checkbox开关），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用和说明：

init_checkbox_state()初始化显示功能；

function checkbox_run(that, style_state)点击某个switch后运行功能；

data-checkbox_state="checked" data-style_state="on"开启状态；

data-checkbox_state="unchecked" data-style_state="off"关闭状态；

data-checkbox_state="disabled" data-style_state="disabled"不可用状态；

id=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

<!--开始 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-->

checkbox.js

// 改变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();
// })();

checkbox.css

input[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;
}