Add class to target based on radio input value (toggle, like function)

Question

Summed up answer

If you come across something similar here is the simple answer:

In my code I get the .val() value of the :checked radio input, that gets the value of all the radios that have been checked, this results in unwanted classes. Taking advantage of the .click callback we can get the .val() value of just the specific input value of the clicked item, which is a radio label in my case.

Here is another great solution to the problem I had.. Add class and remove class based on checked radio? and the jsbin to this solution http://jsbin.com/ugufi/27/

Hope this helps anyone else who may have the same issue... Pretty simple answer.. thanks to all!

The Question

Here is the code I have

http://jsbin.com/ugufi/11/

What I am struggling with is finding a solution to removing the class after adding it to the target.

I have a list of radio buttons, I am getting the value of the :checked radio input and putting that value in a class.

When a new radio is checked It keeps adding onto the class ex

    <div class="radio1 radio2 radio3 radio4"></div>

What I need (which I know is very simple but Im not sure what to use).

   <div class="radio1"></div><!-- Radio input value with radio1 is checked -->

then when I check a new radio input

    <div class="radio4"></div><!-- Radio input value with radio4 is checked -->

PS. Ive looked this question up and found many answers but they all use some sort of .siblings() or .parent() callback, they are great solutions, but the inputs and the target are distant from eachother in my code.

NTyler · Accepted Answer · 2013-06-28 15:53:26Z

0

Changing my answer to be more complete:

$('.moon-generator-attr').click(function() {
  var tabid = $(this).val();

  $('.icon-wrap a.icon').attr('class','icon icon-'+tabid);
  alert($('.icon-wrap a.icon').attr('class'));
});

This will make the class icon and whatever second class you'd like. That way you can still access the element with $('.icon-wrap .icon')

You could also do this if you only have one "a" in your .icon-wrap div:

$('.moon-generator-attr').click(function() {
  var tabid = $(this).val();

  $('.icon-wrap a').attr('class','icon-'+tabid);
  alert($('.icon-wrap a').attr('class'));
});

edited Jun 28, 2013 at 15:53

answered Jun 28, 2013 at 15:09

NTyler

1,4271 gold badge13 silver badges20 bronze badges

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

6 Comments

Michael Joseph Aubry Over a year ago

ok .addclass and attr('class',) both still add the class to the target, but the question is how do I remove the old and add the new (based on checked state)

NTyler Over a year ago

.attr("class", "value") is not adding a class, it's replacing the value of the class attribute. So it will replace the old one with the new one.

Michael Joseph Aubry Over a year ago

well its because nothing is added initially i presume?

Michael Joseph Aubry Over a year ago

Yeah, thats crazy it works because instead of defining the :checked radio we just get the value of the radio that is clicked, so by taking advantage of the .click callback we dont even need to worry about the :checked value, just the clicked value

Michael Joseph Aubry Over a year ago

Well I wasted about 1 hour and 30 min just to find thats all it was.. WOW sucks to suck lol.. I knew it was something simple like that..

|

Dezigo · Accepted Answer · 2013-06-28 15:04:26Z

0

Remove old class + add a new class

$(this).removeClass().addClass('icon-'+tabid+'');

Full code:

$('.moon-generator-attr').click(function() {
    var tabid = $('.moon-generator-attr:checked').val();

    $(this).removeClass().addClass('icon-'+tabid+''); 

      alert($('.icon-wrap a.icon').attr("class"));


});

answered Jun 28, 2013 at 15:04

Dezigo

3,2563 gold badges34 silver badges39 bronze badges

2 Comments

Michael Joseph Aubry Over a year ago

im not removing the class from the label, this would equal the label class, correct me if im wrong?

Michael Joseph Aubry Over a year ago

the label class is .moon-generator-attr... my target to add/remove would be .icon-wrap a.icon

Collectives™ on Stack Overflow

Add class to target based on radio input value (toggle, like function)

Summed up answer

The Question

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Summed up answer

The Question

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related