Change css of class when select radio button

Question

I have a image with the css class .normalImage I made 3 radio buttons and when the user select 1 of the radio buttons the style of the image must change to .blackImage or .sepiaImage

I have 3 radio buttons, each must activate a new style to the image :

<input type="radio" name="color" value="grijs">Black<br>
<input type="radio" name="color" value="sepia">Sepia<br>
<input type="radio" name="color" value="normal">Normaal<br>

How can i change the style of the image when someone checks one of the radio buttons?

I think this will give you the answer you are looking for stackoverflow.com/questions/13152927/… — Andrew McC
– Andrew McC, Commented May 14, 2014 at 11:09
Can you re-use the name attribute like that? Just curious. — Paulie_D
– Paulie_D, Commented May 14, 2014 at 11:10
@Paulie_D why not..? in my knowledge that's how you make a radio button group... — T J
– T J, Commented May 14, 2014 at 11:14
@TJ What I meant was, shouldn't they be like ID's and unique? I confess, I don't know. EDIT: aha - stackoverflow.com/questions/5518458/… — Paulie_D
– Paulie_D, Commented May 14, 2014 at 11:15

Ishan Jain · Accepted Answer · 2014-05-14 11:27:50Z

1

You can use .addClass() method

Try this :

$('input[type=radio]').change(function() {    
    $("img").removeClass();
    if($(this).val() == "grijs"){   
        $('img').addClass('blackImage');
    }
    else if($(this).val() == "sepia"){
        $('img').addClass('sepiaImage');
    }
    else if($(this).val() == "normal"){
        $('img').addClass('normalImage');
    }
});

Working Example

answered May 14, 2014 at 11:27

Ishan Jain

8,22111 gold badges52 silver badges77 bronze badges

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

Comments

AVK · Accepted Answer · 2014-05-14 11:11:23Z

0

Is that what you are looking for?

$('input[name=color]').on('click', function() {
    $('#my-image').removeClass().addClass( $(this).val()+"Image" );
});

answered May 14, 2014 at 11:11

AVK

6459 silver badges22 bronze badges

Comments

Gal Ziv · Accepted Answer · 2014-05-14 11:16:30Z

0

you can add a click function with parameter off the css class.

   function setCssClass(className){
        $("#IMAGE_ID").addClass(className);
   }

   <input type="radio" name="color" value="grijsImage" onclick="setCssClass('grijs');">Black<br>
   <input type="radio" name="color" value="sepiaImage" onclick="setCssClass('sepiaImage');">Sepia<br>
   <input type="radio" name="color" value="normal"onclick="setCssClass('normal');">Normaal<br>

answered May 14, 2014 at 11:16

Gal Ziv

7,41212 gold badges35 silver badges46 bronze badges

Comments

Alok Jha · Accepted Answer · 2014-05-14 11:22:40Z

0

You can use, addClass()

<script type="text/javascript">
if ("input[type='radio']")  
      { 
 $(this).addClass("newclass");
      }
</script>

if you wish to remove the previous class then you can use:

if ("input[type='radio']")  
      { 
 $(this).removeClass().addClass("newclass");            
      }

answered May 14, 2014 at 11:22

Alok Jha

5721 gold badge8 silver badges24 bronze badges

Comments

Sushama Ghadge · Accepted Answer · 2014-05-14 11:23:41Z

0

I think you need to handle radio button .change() event and check for selected and deselected. After that use .removeClass() and .addClass() methods.

answered May 14, 2014 at 11:23

Sushama Ghadge

1

Comments

martynas · Accepted Answer · 2014-05-14 11:25:35Z

0

DEMO

jQuery:

var $img = $("#myImage");

$('input[name=color]').on('change', function() {
   $img.removeClass().addClass($(this).val());
});

HTML:

<p id="myImage">Text instead of an image</p>

<input type="radio" name="color" value="grijs">Black<br>
<input type="radio" name="color" value="sepia">Sepia<br>
<input type="radio" name="color" value="normal">Normaal<br>

CSS:

.grijs {
    color: red;
}

.sepia {
    color: blue;
}

.normal {
    color: green;
}

answered May 14, 2014 at 11:25

martynas

12.3k3 gold badges59 silver badges61 bronze badges

Comments

Möoz · Accepted Answer · 2014-08-04 03:48:47Z

0

There is a better way to change the class; rather than removing then adding a new class, you could use the jQuery switchClass() function.

Like this:

var $img = $("#myImage");

$('input[name=color]').on('change', function()
{
   $img.switchClass($img.attr('class'), $(this).val());
});

answered Aug 4, 2014 at 3:48

Möoz

8632 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

Change css of class when select radio button

7 Answers 7

Comments

Comments

Comments

Comments

Comments

DEMO

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related