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 docs现在使用第二个示例。

对于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

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

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

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

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

Answer 4

该文档提供了bootstrap-switch的事件。但是here是一个使用单个复选框和无线电组的示例，仅用于完整性。我也抛出了Disable方法。

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

Answer 5

试试这个对我有用

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

Answer 6

这是我使用它的方式：

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

我希望它有用!!

Answer 7

试试这个

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

Answer 8

这在使用bootstrapSwitch时有效

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

Bootstrap开关检查事件？

8 个答案: