52

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

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でクリックしますか?

ここで私のトグルウェザーコード:

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/

4

10 に答える 10

9

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

$('#TheCheckBox').on('switchChange.bootstrapSwitch', function () {
   $("#CheckBoxValue").text($('#TheCheckBox').bootstrapSwitch('state'));
});
于 2014-05-28T04:58:45.450 に答える
9

以下のように switch-change 関数を呼び出す必要があります

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

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

ラジオタイプ用です。チェックボックスのタイプについては、 を変更できますtype='checkbox'。

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

于 2013-10-25T08:42:09.310 に答える
2

これを試してみてください

 $('#check').change(function (event) {
    var state = $(this).bootstrapSwitch('state');
    if (state) {
       // true
    } else {
       // false
    }
    event.preventDefault();
});
于 2015-09-01T19:19:51.703 に答える