Jquery if checked toggle class

Question

I have a box with a checkbox, I want to insert in jQuery if the checkbox is checked toggle the class on the box with a transition, but it fails and below is the code:

$(document).ready(function(){
if ($('.onoffcheck').is(':checked')) {
    $(".panel-success").toggleClass("panel-off2");
  } else {
          $(".panel-off").toggleClass("panel-success");
}
});

JSFIDDLE

missed to add jQuery lib in fiddle(left topmost in the fiddle).. Also I dont see any event listener.. — Praveen
– Praveen, Commented Apr 10, 2014 at 8:57

Arun P Johny · Accepted Answer · 2014-04-10 09:01:34Z

1

Try

$(document).ready(function () {
    $('.onoffcheck').change(function () {
        $("#node2").toggleClass("panel-off2", this.checked).toggleClass("panel-success", !this.checked);
    }).change()
});

Demo: Fiddle

answered Apr 10, 2014 at 9:01

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arun P Johny Over a year ago

what is the panel-off and panel-off2 classes

Pedro Corchero Murga Over a year ago

In my website (i have it in local) the code that works in jsfiddle doesn't work because my checkbox is hidded and modified with jquery to make this: bootstrap-switch.org How can i do?

Arun P Johny Over a year ago

@PedroCorcheroMurga try $('.onoffcheck').on('switchChange.bootstrapSwitch', function () {...

Pedro Corchero Murga Over a year ago

Works perfect now!! Only one thing more, how can make a smooth transition with css in the changing class and change the square to be green when checked and grey when not checked glyphicon class glyphicon-stop off (grey) and class glyphicon glyphicon-stop on (green)

Arun P Johny Over a year ago

@PedroCorcheroMurga which square

|

damian · Accepted Answer · 2014-04-10 08:59:00Z

1

First make sure to include the jQuery library. Then you have to listen to the checkbox change event. Otherwise the conditional check gets only executed on document ready.

E.g.:

$(document).ready(function(){
    $('.onoffcheck').on('change', function(){
        if ($(this).is(':checked')) {
            $(".panel-success").toggleClass("panel-off2");
        } else {
            $(".panel-off").toggleClass("panel-success");
        }
    });
});

DEMO

answered Apr 10, 2014 at 8:59

damian

5,4845 gold badges38 silver badges64 bronze badges

Comments

Matyas · Accepted Answer · 2014-04-10 09:00:24Z

1

You have to add a change listener to make the toggle logic execute on every checked change. See working example

var toggle = function () {
    if ($('.onoffcheck').is(':checked')) {
        $(".panel-success").toggleClass("panel-off2");
    } else {
        $(".panel-off").toggleClass("panel-success");
    }
};

$(document).ready(function () {
    toggle();  // initial execution
    $('.onoffcheck').on('change', toggle); // execute it on every change
});

answered Apr 10, 2014 at 9:00

Matyas

13.7k3 gold badges66 silver badges77 bronze badges

Collectives™ on Stack Overflow

Jquery if checked toggle class

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related