在项目中有个地方要用到一个开关，就找了一下发现boostrap-switch这个插件比较符合要求，网上查了不少资料也踩了不少坑。
因为主要就用到标题中两个功能，所以就在这里介绍一下
以下是一个简单的demo。其中js，css都是在线引入复制即可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<style>
.center{
text-align: center;
margin-top: 100px;
}
#state{
font-size: 20px;
color: black;
font-family: "Adobe 黑体 Std R";
font-weight: bold;
}
.btn{
width: 60px;
}
</style>
</head>
<body>
<div class="center">
<input type="checkbox" name="switch">
<p id="state"></p><br>
<button type="button" class="btn btn-primary" id="on">on</button>
<button type="button" class="btn btn-warning" id="off">off</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.js"></script>
<script>
$("input[name=‘switch‘]").bootstrapSwitch({
onText: "开启",
offText: "关闭",
onSwitchChange: function (event, state) {
//监听switch change事件，可以根据状态把相应的业务逻辑代码写在这里
if (state == true) {
$("#state").html(‘switch turn no‘)
} else {
$("#state").html(‘switch turn off‘)
}
}
})
//两个按钮点击动态切换bootsrap开关状态
$("#on").click(function(e){
$("input[name=‘switch‘]").bootstrapSwitch("state",true);
})
$("#off").click(function(e){
$("input[name=‘switch‘]").bootstrapSwitch("state",false);
})
</script>
</html>
原文地址：https://www.cnblogs.com/guofx/p/11198292.html
时间： 2024-10-14 06:29:30