Bootstrap switch.js 开关插件 api

https://blog.csdn.net/qq_26721111/article/details/52957368

需要引入的文件

<link rel="stylesheet" href="css/bootstrap.min.css" />

<link rel="stylesheet" href="css/bootstrap-switch.min.css" />

<script type="text/javascript" src="js/jquery.min.js" ></script>

<script type="text/javascript" src="js/bootstrap-switch.min.js" ></script>

HTML元素

<input name="status" type="checkbox" data-size="small" id="status1" checked><br/><br/> 

<button id="open">开</button>

<button id="close">关</button>

JS代码

     $('[name="status"]').bootstrapSwitch({    //初始化按钮

       onText:"照明",  
       offText:"熄灭",  
       onColor:"success",  
       offColor:"info",  
       size:"small",  
       onSwitchChange:function(event,state){  
           if(state==true){  
               $(this).val("1");  
               console.log("开启");
           }else{  
               $(this).val("2");
               console.log("关闭");
           }  
       }  
   });
       $("#close").click(function(){
         $('[name="status"]').bootstrapSwitch('state', false); // 关闭按钮
       
       });          
       $("#open").click(function(){   
         $('[name="status"]').bootstrapSwitch('state', true); // 打开按钮       
       });

效果

-------下面是转载的Api--------------

bootstrap-switch属性

js属性名	html属性名	类型	描述	取值范围	默认值
state	checked	Boolean	选中状态	true、false	true
size	data-size	String	开关大小	null、mini、small、normal、large	null
animate	data-animate	Boolean	动画效果	true、false	true
disabled	disabled	Boolean	禁用开关	ture、false	false
readonly	readonly	Boolean	开关状态只读，不能修改	true、false	false
indeterminate	data-indeterminate	Boolean	模态	true、false	false
inverse	data-inverse	Boolean	颠倒开关顺序	true、false	false
radioAllOff	data-radio-all-off	Boolean	允许单选按钮被用户取消选中	true、false	false
onColor	data-on-color	String	左侧开关颜色	primary、info、success、warning、danger、default	primary
offColor	data-off-color	String	右侧开关颜色	primary、info、success、warning、danger、default	default
onText	data-on-text	String	左侧开关显示文本	String	ON
offText	data-off-text	String	右侧开关显示文本	String	OFF
labelText	data-label-text	String	开关中间显示文本	String	 
handleWidth	data-handle-width	String|Number	开关左右2侧的宽度	String|Number	auto
labelWidth	data-label-width	String|Number	开关中间的宽度	String|Number	auto
baseClass	data-base-class	String	开关基础样式	String	bootstrap-switch
wrapperClass	data-wrapper-class	String | Array	元素样式容器	String | Array	wrapper
onInit		function	初始化开关	Function	function（event，state）｛｝
onSwitchChange		function	当开关状态改变时触发	Function	function（event，state）｛｝