switch-btn入门实现

写在前边：switch-btn是这样的效果通过阅读本篇文章，你可以成功实现一个switch-btn

---

1. 引入必要的bootstrap-switch相关css以及js文件，此处引用CDN链接实现.参考网址 https://www.bootcdn.cn/bootstrap-switch/

<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

2. html标签添加checkbox标签如图：

<input name="status" type="checkbox" data-size="small" id="status1" checked />

最后的checked表示checkBox为true（被选择状态）

 

3. 编写js初始化switch-btn

$('[name="status"]').bootstrapSwitch({ //初始化按钮

onText:"有效", //switch为true时显示的内容

offText:"无效", //switch为false时显示的内容

onColor:"success", //switch为true时显示内容的背景颜色

offColor:&