使用JQuery選中復選框時切換類

Question

我有一個用引導程序制作的切換器，我希望當選中復選框（開關）時，面板的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/.