Question

我正在尝试将一些事件附加到新的BootstrapToogle复选框http://www.bootstraptoggle.com/，但我无法确定我失败的位置。

所以基本上我有一个引导程序toogle，我想根据checked属性调用一些函数（true或false）

<input type="checkbox" id="editor_draw_erase" data-toggle="toggle" data-on="Draw" data-off="Erase" data-onstyle="success" data-offstyle="danger">

$(function(){
    $("#editor_draw_erase").click(function() {
    var Toggle = document.getElementById('editor_draw_erase');
      if (Toggle.checked) {
        console.log("draw")
          //call some function
      } else {
        console.log("erase")
          //call some other functions
      }
    });

})

小提琴：https://jsfiddle.net/c7p9n62w/12/

知道我做错了什么吗？

Answer 1

我面临同样的问题。这是因为库创建了自己的元素，并且您的复选框并未真正更改。

您可以查看您的复选框是否包含课程off。

您可以在选中复选框时检查DOM来检查这一点。

$(".toggle").click(function() {
  if($(this).hasClass("off")){
     console.log("draw")
  } 
  else{
     console.log("erase")
  }
});

<强> Example

Answer 2

添加一个外部元素来访问它

＆＃13;

  var consoleLine = "<p class=\"console-line\"></p>";

  console = {
    log: function(text) {
      $("#console-log").append($(consoleLine).html(text));
    }
  };
  $(function() {
    $("#ids").on('click',function() {
    alert('hai');
    var Toggle = document.getElementById('editor_draw_erase');
      if (Toggle.checked) {
        console.log("draw")
          //call some function
      } else {
        console.log("erase")
          //call some other functions
      }
    });
  })
    


 //console.log("draw")

＆＃13;

<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ids"><input type="checkbox" id="editor_draw_erase" data-toggle="toggle" data-on="Draw" data-off="Erase" data-onstyle="success" data-offstyle="danger"></div>
<p>
State:
</p>
<div id="console-log"></div>

＆＃13;

Answer 3

我也遇到了麻烦。这对我有用。我正在使用JQuery进行切换，因为我无法使数据切换属性起作用。

  $(function() {
    $('#toggle').bootstrapToggle({
      on: 'Edit Enabled',
      off: 'Edit Disabled'
    })

     $('#toggle').change(function() {
       if($(this).prop('checked')){
         $("#message").html("this is true");
       }
       else{
         $("#message").html("this is false");
       }
     })
  })

这使用JQuery设置标签以及在切换上调用/执行其他操作。

BootstrapToggle复选框在单击事件上调用函数

3 个答案: