Question

我有以下html代码（正常更改复选框的状态），我需要在更改某个复选框的状态时运行警报。

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

我尝试了以下组合，但我无法执行例程：

1）

$('.make-switch.input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

2）

$('input[type="checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

3）

$('.alert-status').on('switchChange.bootstrapSwitch', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

4）

$('.alert-status').on('switchChange', function(event, state) {
          console.log(this); // DOM element
          console.log(event); // jQuery event
          console.log(state); // true | false
          alert(this);
});

5）

/*$(".alert-status").click(function(event) {
          event.preventDefault();
          event.stopPropagation();
          alert($(this).attr('data-checkbox'));
});*/

我在互联网上搜索过，我查询了一些例子，我使用过firebug，但是我找不到捕获事件的方法。谁能帮我？

我找到了这个例子并且在这个环境中进行了修改和工作，而不是在我的网站上：

http://jsfiddle.net/sumw4/13/（我添加了probeProbe类和部分代码）

Answer 1

我认为您的代码应该正常工作http://jsfiddle.net/PNU45/

<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE2" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE3" class="alert-status">
</div>
<div class="make-switch switch-small">
  <input type="checkbox" checked="true" data-checkbox="VALUE4" class="alert-status">
</div>

javascript：

$('.alert-status').bootstrapSwitch('state', true);


$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {

    alert($(this).data('checkbox'));
    //alert(event);
   // alert(state);
});

Answer 2

试试这个：

获取州

$('.alert-status').bootstrapSwitch('state', true);

改变

$('.alert-status').on('switchChange.bootstrapSwitch', function (event, state) {
 if (state) {
    // true
 } else {
    // false
 }
   event.preventDefault();
});

Answer 3

我一直遇到与bootstrapSwitch 3相同的问题。因此，在尝试了很多变种失败之后，我决定直接测试代码。毕竟，这是我的解决方案（至少在Chrome下，必须在另一组浏览器下进行测试）

拥有此HTML ...

<div class="make-switch switch-small"> 
  <input type="checkbox" checked="true" data-checkbox="VALUE1" class="alert-status">
</div>

这个javascript对我来说很完美：

<script type="text/javascript">
   (function(){
       function value1Changed(event, state){
          var myNewState = state.value;
       }

       $('input[data-checkbox="VALUE1"]')
          .parent('.make-switch')
          .on('switch-change', value1Changed);
   });
</script>

希望它可以帮助!!

Bootstrap-switch不是事件

3 个答案: