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