Question

我有一个用bootstrap制作的切换器，我希望当选中复选框（开关）时，面板的class会从灰色变为绿色。之前我做过这个，但是我改变了我的切换器，它不再工作了。

切换台的主要标记是：

<label class="switch-light well" onclick="">
  <input type="checkbox">
  <span>
    Wireless
    <span>Off</span>
    <span>On</span>
  </span>

  <a class="btn btn-primary"></a>
</label>

JQuery的toggleclass是这样的：

$(document).ready(function () {
    $('.switch-light').bootstrapSwitch();
    $('.switch-light').on('input:checked', function () {
        $("#tasksList > div > div.panel").toggleClass("panel-off2 panel-off", this.checked).toggleClass("panel-success", !this.checked);
    }).change()
});

这是我的jsfiddle：http://jsfiddle.net/CYLcY/

Answer 1

Try this code:

$(document).ready(function () {
    $('.switch-light').bootstrapSwitch();
    $('.panel-body input').on('change', function() {
        $(this).parents('.panel-body').prev().parent('.panel').toggleClass("panel-off2", !this.checked).toggleClass("panel-success", this.checked);
    })
});

Also you can check it here: http://jsfiddle.net/CYLcY/27/.

Answer 2

Try again this:

$(document).ready(function () {
    $('.switch-light').bootstrapSwitch();
    $('.switch-light input').on('change', function() {
        $('.panel').toggleClass("panel-off2", !this.checked).toggleClass("panel-success", this.checked);
    })
});

Also check the code here: http://jsfiddle.net/CYLcY/28/.

使用JQuery检查复选框时切换类

2 个答案: