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-switch 3.0候选版本，之前在官方页面上作为示例给出的事件是：

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

它不会被解雇的！

解决方案-改为使用以下内容：

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

其中，state参数是checkbox的值。

Answer 2

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

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

它返回true或false

更改引导开关时提交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-change函数

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

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

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

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