bootstrap实现开关switch按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42822489/article/details/113685352

一、效果图

二、代码实现

<!DOCTYPE html>  
<html>  
<head>  
<!-- 所需js/css文件 -->  
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">  
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>  
</head>  
<body>  
    <!-- HTML -->  
    <input type="checkbox" checked id="checkbox"/>  
    <!-- JS -->  
    <script type="text/javascript">  
        $(function(){  
            /* 初始化控件 */  
            $("#checkbox").bootstrapSwitch({  
                onText : "ON",      // 设置ON文本  
                offText : "OFF",    // 设置OFF文本  
                onColor : "success",// 设置ON文本颜色     (info/success/warning/danger/primary)  
                offColor : "info",  // 设置OFF文本颜色        (info/success/warning/danger/primary)  
                size : "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)  
                // 当开关状态改变时触发  
                onSwitchChange : function(event, state) {  
                    if (state == true) {  
                        alert("ON");  
                    } else {  
                        alert("OFF");  
                    }  
                }  
            });  
        });  
    </script>  
</body>  
</html>