web-dev-qa-db-ja.com

Bootstrap=チェックイベントを切り替えますか？

チェックボックスをオンにしたイベントにこのコードを使用しますが、機能しません。

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/

javascriptjquerycsstwitter-bootstrapcheckbox
31
user2784250

注： bootstrap docs では2番目の例を使用します。

Bootstrap-switch 3.0リリース候補の場合、以前公式ページに例として示されたイベントは次のとおりです。

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

解雇されません！

解決策-代わりにこれを使用してください：

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

ここで、stateパラメーターはcheckboxの値です。

76
sergiu

私にとって、これは唯一の機能するコード（Bootstrap 3.0）でした。

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

私を返しますtrueまたはfalse

bootstrap switch changeで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);
        }
    });
});
15
Meloman

以下のようなスイッチ変更関数を呼び出す必要があります

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

動的に作成する場合は、以前に私が投稿したリンクに記載されている手順に従ってください。 [ 無線ブートストラップスイッチを動的に作成 ]

これは無線タイプ用です。チェックボックスタイプの場合、type='checkbox'。

他の例については、以下のリンクを参照してください- http://www.bootstrap-switch.org/

8
user2680900

ドキュメントには、ブートストラップスイッチのイベントが記載されています。しかし、 here は、完全を期すためにラジオグループだけでなく、単一のチェックボックスを使用する例です。また、Disableメソッドもスローしました。

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

これは私のために働きます。

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

これは私のために働いてみてください

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

これは私がそれを使用する方法です：

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

お役に立てば幸いです!!

0
Radames E. Hernandez

これを試して

<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
               }
        });
0
PK-1825