纯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;
}

-