bootstrap - switch的初始化和监听事件

?一、Bootstrap Switch 选择框开关控制?

依赖于Bootstrap的一款轻量级插件，可以给选择框设置类似于开关的样式

?

二、使用时注意初始化：

js初始化:

  $(‘[class="form-control switch-open"]‘).bootstrapSwitch({
                size: ‘small‘,onSwitchChange: function (event,state) {
                    var ProductId = event.target.defaultValue;

                    if (state == true) {
                        //  updateStatus(ProductId,‘1‘);   
                         console.log(1)
                    } else {
                        console.log(0)
                    }

                }
            });

?

?三、使用步骤

1首先引入jquery

2然后引入bootstrap的js和css

3引入bootstrap的switch的js和css

<link?href="bootstrap.css"?rel="stylesheet"?type="text/css">

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

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

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

4.对页面上指定的input【type="checkbox"】

如1：

<input?type="checkbox" name="my-switch" checked>

? js初始化:（? $(document).ready(function () {...? }）（否则无效）

$("[name=‘my-switch‘]").bootstrapSwitch();

或者：

? // 初始化 注意：state 属性的设置一定放在最后
?$("[name=‘my-switch‘]").bootstrapSwitch(‘onText‘,‘开启‘).bootstrapSwitch(‘offText‘,‘关闭‘).bootstrapSwitch("onColor",‘success‘) .bootstrapSwitch(‘state‘,true);

?$("[name=‘my-switch‘]").bootstrapSwitch("onSwitchChange",function(event,state){
??? var val=‘‘;
??? var text=‘‘;
??? if(state==true){
??????? val=1;
??????? text=‘开启‘;
??? }else{
??????? val=0;
??????? text=‘关闭‘;
??? }
})

?

如2：

?<input ?type="checkbox"? class=‘form-control switch-open‘ name=‘switch-open‘>

? js初始化:（? $(document).ready(function () {...? }）（否则无效）

for (var i = 0 ; i < $(‘[class="form-control switch-open"]‘).length ; i++)
            {
                var obj = $(‘[class="form-control switch-open"]‘).eq(i);
                if (obj.is(":checked")) {
                    CollectChannelSet($(obj) ,true)
                } else {
                    CollectChannelSet($(obj) ,false)
                }
                
            }

   $(‘[class="form-control switch-open"]‘).bootstrapSwitch({
             onText:"打开",?

?? ???????? offText:"关闭",?

?? ???????? onColor:"success",?

?? ???????? offColor:"primary",?

?? ???????? size:"small",?? ???
???
            onSwitchChange: function ( event,state) {
                    if ($(this).is(":checked")) {
                        CollectChannelSet($(this).parents("td").index(),true)
                    } else {
                        CollectChannelSet($(this).parents("td").index(),false)
                    }
                }
            });

?参考:?前端插件之Bootstrap Switch 选择框开关控制 ? https://www.cnblogs.com/fu-yong/p/8794457.html