引导开关检查事件?

Posted

技术标签:

【中文标题】引导开关检查事件?【英文标题】:Bootstrap switch checked event? 【发布时间】:2013-09-20 17:35:25 【问题描述】:

我将此代码用于复选框选中事件,但它不起作用。

css

<link href="assets/plugins/bootstrap-switch/static/stylesheets/bootstrap-switch-metro.css" rel="stylesheet" type="text/css" />

html

<div class="switch switch-mini" data-on-label="<i class='icon-sun icon-white'></i>" data-off-label="<i class='icon-sun muted'></i>">
    <input id="swWeather" type="checkbox" class="toggle" onclick="toggleWeather()" />
</div>

js

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

如果我使用这种方式,只是视觉样式效果很好,但它不会触发toggleWeather() 功能,但是如果我删除bootstrap-switch.js,所有视觉样式都会被删除,并且看起来像标准复选框,尽管它工作得很好。

如何更改复选框选中状态并使用引导开关单击它?

这里是我的切换天气代码:

function toggleWeather() 

            if (document.getElementById('swWeather').checked)

             weatherLayer.setMap(map); 

            else

             weatherLayer.setMap(null); 

            if (document.getElementById('swCloud').checked)

             cloudLayer.setMap(map); 

            else

             cloudLayer.setMap(null); 
        

顺便说一下,我在这个主题中使用了这些开关: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal

这不是很好的例子,但就是这样 http://jsfiddle.net/UHkN6/

【问题讨论】:

在此处发布toggleWeather 代码,或在jsfiddle.net 中解决问题 试试 $(document).on('click','#swWeather',function());点击事件 在哪个点击事件中?我必须放在哪里? 似乎是正确的,只是在这里装箱:jsbin.com/IYuMuLI/1/edit 它是这样工作的,但它看起来是标准的复选框,如果它看起来像引导开关,它不能正常工作 【参考方案1】:

你应该像下面这样调用switch-change函数

$('.switch').on('switch-change', function () 
    console.log("inside switchchange");
    toggleWeather();
);

如果您希望动态创建它,请按照我之前发布的链接中给出的步骤操作。 [create a radio bootstrap-switch dynamically]

这是无线电类型。对于复选框类型,您可以更改type='checkbox'

您可以参考以下链接了解更多示例 - http://www.bootstrap-switch.org/

【讨论】:

【参考方案2】:

注意:bootstrap docs 现在使用第二个示例。

对于 bootstrap-switch 3.0 候选版本,之前在官方页面上作为示例给出的事件是:

$('#switch-change').on('switchChange', function (e, data) ); 

它不会被解雇!

解决方案 - 改用这个:

$('#switch-change').on('switchChange.bootstrapSwitch', function (event, state) ); 

其中state 参数是checkbox 的值。

【讨论】:

只是一个注释,但到目前为止,组件或文档中仍未修复此问题。 今天也没有修复 这确实应该在文档中。 :D 如何反转函数内部的状态(事件,状态)?? 这对我不起作用,但下面的那个对我有用。 ***.com/a/39450925/4526479【参考方案3】:

文档提供了引导开关的事件。但是here 是一个示例,它使用单个复选框以及一个单选组,只是为了完整性。我也抛出了 Disable 方法。

$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () 
   $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
);

【讨论】:

【参考方案4】:

试试这个对我有用

 $('#check').change(function (event) 
    var state = $(this).bootstrapSwitch('state');
    if (state) 
       // true
     else 
       // false
    
    event.preventDefault();
);

【讨论】:

【参考方案5】:

对我来说,这是唯一有效的代码(Bootstrap 3.0):

$('#my_checkbox').on('change.bootstrapSwitch', function(e) 
    console.log(e.target.checked);
);

它返回我 truefalse

在引导开关更改时提交 Ajax 的示例:

$('#my_checkbox').on('change.bootstrapSwitch', function(e) 
    $.ajax(
        method: 'POST',
        url: '/uri/of/your/page',
        data: 
            'my_checkbox_value': e.target.checked
        ,
        dataType: 'json',
        success: function(data)
            console.log(data);
        
    );
);

【讨论】:

对我有用,但 stateundefined。您从 e.target.checked 获得价值,这似乎是获得它的正确方法。 是的,你说得对,在这种情况下状态可能未使用。我会删除它。 它适用于Bootstrap 4.3 https://getbootstrap.com/docs/4.3/components/forms/ 代码&lt;div class="custom-control custom-switch"&gt; &lt;input type="checkbox" class="custom-control-input" id="customSwitch1"&gt; &lt;label class="custom-control-label" for="customSwitch1"&gt;Do it!&lt;/label&gt; &lt;/div&gt;【参考方案6】:

这对我有用。

$(".switch").bootstrapSwitch(
        'size': 'mini',
        'onSwitchChange': function(event, state)
            console.log('switched...')
        ,
        'AnotherName':'AnotherValue'
    );

【讨论】:

【参考方案7】:

这是我使用它的方式:

HTML

<input name="field_name" class="switcher" type="checkbox" data-size="small" value="1">

JQuery

$('.switcher').on('switchChange.bootstrapSwitch', function(event, state) 
    if (state)
    
        // Checked
    else
    
        // Is not checked
    
);

希望对你有帮助!!

【讨论】:

【参考方案8】:

试试这个

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

    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function (event, state) 
        
              if (state == true) 
               
                 //your code
               
               else
               
                  //your code
               
        );

【讨论】:

【参考方案9】:

这在使用 bootstrapSwitch 时有效

    $('body').on('switchChange.bootstrapSwitch','.switch',function () 
        alert('Done')
    );

【讨论】:

【参考方案10】:

这只是一个程式化的复选框。所以你可以像使用复选框一样使用它

document.addEventListener('change', function() 
    var chk = event.target
    if (chk.tagName === 'INPUT' && chk.type === 'checkbox') 
        console.log(chk.checked)
    
)

这个例子是为开关的 2 个位置设计的,作为响应,你会得到真或假——取决于复选框的位置

【讨论】:

以上是关于引导开关检查事件?的主要内容,如果未能解决你的问题,请参考以下文章

PXE | 开关机

带有ajax调用捕获事件的数据表插件内的引导开关

win2003开机事件7026 事件查看器描述:下列引导或系统启动驱动程序无法加载akyupzs

perl 开关的代码内检查

为啥我不能用开关检查函数的返回?

检查 NSIndexPath 的行和节的开关