javascript - 使用 JQuery 选中复选框时切换类

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/.