需要引入的css和js
1 <link rel="stylesheet" type="text/css" href="/css/common/bootstrap-switch.css"> 2 <script src="js/common/jquery-1.11.1.min.js"></script> 3 <script type="text/javascript" src="/js/common/bootstrap-switch.js"></script>
html代码
1 <div class="bootstrap-switch bootstrap-switch-large"> 2 <input type="checkbox" name="mycheck"/> 3 </div>
js实现初始化代码
1 $('[name="status"]').bootstrapSwitch({ 2 onText:"启动", 3 offText:"停止", 4 onColor:"success", 5 offColor:"info", 6 size:"small", 7 onSwitchChange:function(event,state){ 8 if(state==true){ 9 $(this).val("1"); 10 }else{ 11 $(this).val("2"); 12 } 13 } 14 })
| 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）｛｝ |
覆盖全局默认值：
$.fn.bootstrapSwitch.defaults.size = 'large';
$.fn.bootstrapSwitch.defaults.onColor = 'success';