Bootstrap chuyển sự kiện đã kiểm tra?

Question

Tôi sử dụng mã này cho sự kiện đã chọn hộp kiểm nhưng nó không hoạt động.

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> 

Nếu tôi sử dụng cách này, chỉ cần thị giác làm việc theo phong cách tốt, nhưng nó không kích hoạt toggleWeather() chức năng, nhưng nếu tôi loại bỏ bootstrap-switch.js, tất cả các kiểu trực quan sẽ bị xóa và trông chuẩn như stan dard checkbox, mặc dù nó hoạt động rất tốt.

Làm cách nào để thay đổi trạng thái đã chọn hộp kiểm, hãy nhấp vào trạng thái đó bằng công tắc khởi động?

đây đang toggleweather tôi:

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

bởi cách tôi sử dụng các công tắc với chủ đề này: http://www.keenthemes.com/preview/metronic_admin/form_component.html#myModal

Nó không phải là ví dụ tốt nhưng như thế http://jsfiddle.net/UHkN6/

Answer 1

Bạn nên gọi chức năng chuyển đổi thay đổi như bên dưới

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

Nếu bạn đang muốn tạo động, hãy làm theo các bước được cung cấp trong liên kết đã được tôi đăng trước đây. [create a radio bootstrap-switch dynamically]

Đây là loại radio. Đối với loại hộp kiểm, bạn có thể thay đổi type='checkbox'.

Bạn có thể tham khảo các liên kết dưới đây để biết thêm ví dụ - http://www.bootstrap-switch.org/

Answer 2

Lưu ý: Các bootstrap docs hiện đang sử dụng ví dụ thứ hai.

Đối bootstrap-switch 3.0 Release Candidate sự kiện trước đó được cho là một ví dụ trên trang chính thức là:

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

Nó không bị sa thải!

Giải pháp - sử dụng này để thay thế:

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

nơi state tham số là giá trị của checkbox.

Answer 3

Tài liệu cung cấp các sự kiện cho công tắc khởi động. Nhưng here là một ví dụ sử dụng một hộp kiểm duy nhất cũng như một nhóm radio chỉ để hoàn thành. Tôi cũng đã ném vào phương pháp Disable là tốt.

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

Answer 4

Hãy thử điều này làm việc cho tôi

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

Answer 5

Đối với tôi đây là đoạn code làm việc chỉ (Bootstrap 3.0):

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

Nó trả về cho tôi đúng hoặc false

Ví dụ với trình Ajax về biến đổi chuyển đổi bootstrap:

$('#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 6

Công việc này đối với tôi.

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

Answer 7

Đây là cách mà tôi sử dụng nó:

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

Tôi hy vọng nó là hữu ích !!

Answer 8

thử này

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