bootstrapSwitch bootstrap 的开关组件扩展

bootstrapSwitch的引入文件

bootstrapSwitch的使用基于bootstrap的引用基础上进行使用

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

bootstrapSwitch的html代码

写一个原生的input框就可以了

<input type="checkbox" name="isAdColumn" id="isAdColumn" data-on-text="是" data-off-text="否">

bootstrapSwitch的js代码

$("#isAdColumn").bootstrapSwitch();
      $('#isAdColumn').on('switchChange.bootstrapSwitch',function(event,state){
            //获取状态
            console.log(state); 
            if(state){
            	$("#isAdColumn").val(1);
            }else{
            	$("#isAdColumn").val(0);
            }
            
        });

总结

bootstrapSwitch的使用就是这么简单，我觉得博客越简单明了好点，bootstrapSwitch的官方文档地址为 www.bootcss.com/p/bootstrap… 可以了解更多的使用，欢迎大家一起留言探讨