效果：
条件：需要导入jquery文件
原文：https://www.cnblogs.com/nyah/p/7019111.html
原文有两种
1.无js实现
2.jquery实现 （他原来的第二种不够完美只能单独使用，如果是循环输出的有多行的话就会出问题，修改一个开关另一个开关也被修改，我进行了修改，可以直接拿去用了）
修改后如图：（开关互不影响）
代码在此：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<style type="text/css">
.cw-switch{display:inline-block;width:48px;height:24px;line-height:22px;border-radius:24px;vertical-align:middle;border:1px solid #ccc;background-color:#ccc;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out}
.cw-switch-inner{color:#fff;font-size:12px;position:absolute;left:25px}
.cw-switch:after{content:'';width:20px;height:20px;border-radius:20px;background-color:#fff;position:absolute;left:1px;top:1px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out}
.cw-switch:active:after{width:26px}
.cw-switch-checked{border-color:#39f;background-color:#39f}
.cw-switch-checked .cw-switch-inner{left:8px}
.cw-switch-checked:after{left:25px}.cw-switch-checked:active:after{left:19px}
.cw-switch-disabled{cursor:not-allowed;background:#f3f3f3;border-color:#f3f3f3}
.cw-switch-disabled:after{background:#ccc;cursor:not-allowed}.cw-switch-disabled .cw-switch-inner{color:#ccc}
</style>
</head>
<body>
<div id="useswitch" class="cw-switch cw-switch-checked">
<div class="cw-switch-inner">
<span id="word">开</span>
</div>
</div>
<script type="text/javascript">
$(function(){
$("[id = useswitch]").click(function(event) {
if($(this).hasClass('cw-switch-checked')){
$(this).find("#word").text('关');
}else{
$(this).find("#word").text('开');
}
$(this).toggleClass('cw-switch-checked');
});
})
</script>
</body>
</html>