Toggle class when checkbox is checked with JQuery

Question

I have a switcher made with bootstrap, i want that when the checkbox (switch) is checked, the class of the panel change, from grey to green. I did this before but i changed my switcher and it doesn't work anymore.

The main markup of the switcher is this:

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

And the toggleclass of JQuery is this:

$(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()
});

This is my 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/.