Bootstrap 开关（switch）控件使用

最新推荐文章于 2025-11-28 11:47:28 发布

原创最新推荐文章于 2025-11-28 11:47:28 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #switch

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一款基于复选框美化的开关控件BootstrapSwitch的使用方法，包括如何引入必要的JS和CSS文件，以及如何通过JS代码初始化控件并设置其属性，如文字显示、颜色、大小和状态改变时的回调函数。

Bootstrap Switch ：通过复选框美化实现的一款开关控件
需要引用的JS和CSS可以在参考链接中最底部下载使用

html代码：

<input type="checkbox" name="smsenable" id="smsenable" />

JS代码：

$(function(){
    $('[name="smsenable"]').bootstrapSwitch({  
        onText:"OFF",  
        offText:"ON",  
        onColor:"success",  
        offColor:"info",  
        size:"small",  
        onSwitchChange:function(event,state){  
            if(state==true){  
            	alert('已打开');  
            }else{  
            	alert('已关闭');  
            }  
        }  
   }) 
})