Bootstrap开关检查事件？

Question

我使用此代码进行复选框检查事件,但它不起作用.

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,所有视觉样式都被删除,看起来标准为标准复选框,虽然它工作得很好.

如何更改复选框选中状态使用bootstrap-switch单击它？

在这里我的toggleweather代码:

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/

Answer 1

注意:bootstrap文档现在使用第二个示例.

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

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

它没有被解雇!

解决方案 - 使用此代替:

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

其中stateparameter是值的checkbox.

Answer 2

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

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

它返回我真或假的

在bootstrap交换机更改时提交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);
        }
    });
});

Answer 3

您应该像下面这样调用开关更改功能

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

如果您要查看动态创建它,请按照我之前发布的链接中给出的步骤操作.[ 动态创建无线电引导开关 ]

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

有关更多示例,请参阅以下链接 - http://www.bootstrap-switch.org/

Answer 4

该文档提供了bootstrap-switch的事件.但是这里有一个例子,它只使用一个复选框和一个无线电组来完成.我也抛出了Disable方法.

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

Answer 5

这项工作对我来说。

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