Bootstrap 开关(switch)使用整理

时间:2021-05-28 19:44:28

1.在JS里根据指定的 1或者0 或者其它值让按钮变成 on 或者 off (通常需要根据数据库查询的结果初始化开关的状态)

(--开关插件包 bootstrap-switch.min.js)

<div class="make-switch" data-on-label="开" data-off-label="关" id="toggle-state-switch" data-on="success" data-off="warning">
<input id ="toggle" type="checkbox" checked="checked" class="toggle" />
</div> function changeState(stateValue){
if(stateValue==1){
$('#toggle-state-switch').bootstrapSwitch('setState', true);
}else{
$('#toggle-state-switch').bootstrapSwitch('setState', false);
}
}

tip:

--文本设置

data-on-label="开"

data-off-label="关"

--颜色设置(5种:info success warning danger primary)

data-on="success" data-off="warning"

2.改变开关状态,获取开关的值

$('#toggle-state-switch').on('switch-change', function (e, data) {
var $el = $(data.el);
var value = data.value;
});