Bootstrap 开关（switch）控件

weixin_30709635

于 2017-07-14 12:34:00 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Cein/p/7169548.html

本文介绍了如何使用 Bootstrap Switch 插件实现开关按钮效果，并展示了如何通过 JavaScript 进行初始化设置及状态切换的方法。

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

Address

博客1

取值

$('#switcher').bootstrapSwitch('state'); // true || false
$('#switcher').bootstrapSwitch('toggleState');
$('#switcher').bootstrapSwitch('setState', false); // true || false

html

<input name="status" type="checkbox" data-size="small">

js初始化

$('[name="status"]').bootstrapSwitch({  
        onText:"启动",  
        offText:"停止",  
        onColor:"success",  
        offColor:"info",  
        size:"small",  
        onSwitchChange:function(event,state){  
            if(state==true){  
                $(this).val("1");  
            }else{  
                $(this).val("2");  
            }  
        }  
    })