Bootstrap 开关（switch）控件使用

最新推荐文章于 2025-06-08 09:13:56 发布

猴子请来的水军。

最新推荐文章于 2025-06-08 09:13:56 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap switch

本文链接：https://blog.csdn.net/github_39121448/article/details/83343534

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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('已关闭');  
            }  
        }  
   }) 
})