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

                }
            });

@H_944_2@

三、使用步骤

1首先引入jquery

2然后引入bootstrap的js和css

3引入bootstrap的switch的js和css

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

如1：

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

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

@H_944_2@

或者：

// 初始化注意：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：

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

@H_944_2@

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

@H_944_2@

大佬总结

以上是大佬教程为你收集整理的bootstrap - switch的初始化和监听事件全部内容，希望文章能够帮你解决bootstrap - switch的初始化和监听事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：bootstrap switch 事件初始化监听

上一篇: bootstrap-daterangepicker插件运... 下一篇:bootstrap 标签切换

猜你在找的Bootstrap相关文章