JQuery toggleClass with 2 Classes?

Question

I am working with this code: (Updated)

   <script>
$(function(){
//Radio Item 1
$("#radio1").change(function() {

$("#defaultwrapper").addClass("background_color_selected");
$("#default_wrapper").removeClass("def_background_color");

});

//Radio Item 2
$("#radio2").change(function() {

$("#default_wrapper2").addClass("background_color_selected");
$("#default_wrapper2").removeClass("def_background_color");

});



});
</script>

My problem is that I need the background-color of the selected radio to change and it's not toggling right now

Have you had a look at the documentation? api.jquery.com/toggleClass. It clearly says: "className One or more class names (separated by spaces) to be toggled for each element in the matched set.". Or, if you don't want both classes to be added, call toggleClass twice, or omit the flag. — Felix Kling
– Felix Kling, Commented Jan 3, 2012 at 10:16
With a boolean value, that will just add or remove both of them, though. — Andreas Eriksson
– Andreas Eriksson, Commented Jan 3, 2012 at 10:18

Krzysztof · Accepted Answer · 2012-01-03 10:50:15Z

2

  $(function(){
        $("#myradio").change(function() {
    $("#wrapper").toggleClass("classOne", this.checked).toggleClass("classTwo", !this.checked)
        }).change();
    })

edited Jan 3, 2012 at 10:50

Krzysztof

16.2k2 gold badges52 silver badges79 bronze badges

answered Jan 3, 2012 at 10:16

Andreas Eriksson

9,0278 gold badges52 silver badges66 bronze badges

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

Comments

Krzysztof · Accepted Answer · 2012-01-03 10:52:03Z

1

(Update) In jQuery no event is fired when radio is unselected. Try to create global handler:

$(function(){
    $("input[type=radio]").change(function() {
        $("input[type='radio']", $(this).parent().parent()).each(function() {
            $(this).parent()
                .toggleClass("background_color_selected", this.checked)
                .toggleClass("def_background_color", !this.checked);
        });
    });
});

For html:

<div>
    <div class="def_background_color"><input type="radio" id="radio1" name="aaa" /> One</div>
    <div class="def_background_color"><input type="radio" id="radio2" name="aaa" /> Two</div>
</div>

Working sample: http://jsfiddle.net/THrYJ/

edited Jan 3, 2012 at 10:52

answered Jan 3, 2012 at 10:37

Krzysztof

16.2k2 gold badges52 silver badges79 bronze badges

Comments

Snicksie · Accepted Answer · 2012-01-03 10:20:36Z

1

If you have classOne present at first (f.e. <div class="classOne" id="test">Text</div>) you can switch classes like this: $("#test").toggleClass("classOne classTwo");. This will remove the class classOne (because its present yet) and it will add the class classTwo (as its not present yet).

answered Jan 3, 2012 at 10:20

Snicksie

1,99717 silver badges27 bronze badges

Comments

Murtaza · Accepted Answer · 2012-01-03 10:23:55Z

1

Hi i had the same problem but this is what i have done in my project...

    <script>
    $(".rtPanhold01").addClass("rtPanhold02");
        $(".rtPanhold01").removeClass("rtPanhold01");
</script>

answered Jan 3, 2012 at 10:23

Murtaza

3,0752 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

JQuery toggleClass with 2 Classes?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related