自舉開關檢查事件？

我使用此代碼複選框選中事件，但它不起作用。自舉開關檢查事件？

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，所有視覺樣式都被刪除，並且看起來像標準一樣dard複選框，雖然它工作得很好。

如何更改複選框檢查狀態用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/

來源

2013-09-16 user2784250

郵政'toggleWeather'代碼在這裏，或使問題的小提琴在http://jsfiddle.net/ –

嘗試$（文件）。在（ '點擊'，」＃swWeather」，函數（）{}）;對於點擊事件中的點擊事件 – V31

？我必須穿上它嗎？ – user2784250

你應該叫開關切換功能如下

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

如果您看到要動態創建它，請按照之前由我發佈的鏈接中給出的步驟操作。 [create a radio bootstrap-switch dynamically]

這是用於無線電類型。對於複選框類型，您可以更改type='checkbox'。

您可以參考以下鏈接瞭解更多的例子 - http://www.bootstrap-switch.org/

來源

2013-10-25 08:42:09 user2680900

注：bootstrap docs現在使用的第二個例子。

對於引導開關3.0候選發佈版之前作爲一個例子給出的官方頁面上的事件是：

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

它不被解僱！

解決方案 - 使用這個來代替：

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

其中state參數是checkbox的價值。

來源

2014-03-19 07:35:37 sergiu

只是一個說明，但截至目前，這仍然沒有固定在組件或文檔中。 – JonRed

今天不確定 – dbinott

這應該真的在文檔中。：D –

該文檔提供了引導程序開關的事件。但here是一個例子，爲了完整性，它使用單個複選框以及廣播組。我也拋出了Disable方法。

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

來源

2014-05-28 04:58:45 Skindeep2366

試試這個工作對我來說

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

來源

2015-09-01 19:19:51 Offboard

對我來說，這是唯一的工作代碼（引導3.0）：

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

它返回我真正或假

例與引導開關變化阿賈克斯提交：

$('#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); 
     } 
    }); 
});

來源

2016-09-12 13:00:29 Meloman

適用於我，但'國家'是'未定義'。你從'e.target.checked'得到了這個值，這似乎是正確的方法。 – Jeff

是的，你是對的，在這種情況下狀態可能沒有被使用。我會刪除它。 – Meloman

這爲我工作。

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

來源

2017-08-11 23:12:38 felixmpa

這是我使用它的方式：

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

我希望這是有幫助的！

來源

2017-12-02 16:10:29

試試這個

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

來源

2018-02-15 09:14:38

自舉開關檢查事件？

回答

相關問題