bootstrap - switch的初始化和監聽事件

 1、Bootstrap Switch 選擇框開關控制 

依賴於Bootstrap的一款輕量級插件，能夠給選擇框設置相似於開關的樣式

 

2、使用時注意初始化：

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)
                    }

                }
            });

 

 3、使用步驟

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