Событие проверки переключателя бутстрапа?

Я использую эти коды для отмеченного флажка события, но это не работает.

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>

<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/

Ответ 1

Примечание: загрузочные документы теперь используют второй пример.

Для кандидата выпуска bootstrap-switch 3.0 событие, ранее заданное в качестве примера на официальной странице, было:

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

Это не срабатывает!

Решение - используйте это вместо:

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

где state параметр - это значение checkbox.

Ответ 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);
        }
    });
});

Ответ 3

Вы должны вызвать функцию смены переключателя, как показано ниже

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

Если вы хотите создать его динамически, выполните действия, указанные в ссылке, которая была ранее размещена мной. [динамически создавать динамический бутстрап-переключатель]

Это для типа радио. Для типа флажка вы можете изменить type='checkbox'.

Вы можете обратиться к приведенной ниже ссылке для получения дополнительных примеров - http://www.bootstrap-switch.org/

Ответ 4

Документация содержит события для бутстрап-переключателя. Но здесь является примером, который использует только один флажок, а также группу радио только для полноты. Я также выбрал метод Disable.

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

Ответ 5

Эта работа для меня.

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

Ответ 6

Попробуй это сработало для меня

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

Ответ 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
    }
});

Я надеюсь, что это будет полезно!!