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 http://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — Andrew McC, May 14 '14 at 11:09
Can you re-use the `name` attribute like that? Just curious. — Paulie_D, May 14 '14 at 11:10
@Paulie_D why not..? in my knowledge that's how you make a radio button group... — T J, May 14 '14 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 - http://stackoverflow.com/questions/5518458/does-a-name-attribute-have-to-be-unique-in-a-html-document — Paulie_D, May 14 '14 at 11:15
Your question is not clear. "must change to .blackImage or .sepiaImage" are you applying classes randomly..? or do you need to apply a specific class for a specific radio..? — T J, May 14 '14 at 11:16
@Paulie_D the purpose of common `name` attribute here is to group them together so that only one among them can be selected at a time.. if the names are different all 3 can be selected at a time... — T J, May 14 '14 at 11:18

score 1 · Accepted Answer · answered May 14 '14 at 11:27

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

score 0 · Answer 2 · answered May 14 '14 at 11:11

0

Is that what you are looking for?

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

answered May 14 '14 at 11:11

AVK

645
9
22

score 0 · Answer 3 · answered May 14 '14 at 11:16

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>

score 0 · Answer 4 · answered May 14 '14 at 11:22

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");            
      }

score 0 · Answer 5 · answered May 14 '14 at 11:23

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 '14 at 11:23

Sushama Ghadge

1

score 0 · Answer 6 · answered May 14 '14 at 11:25

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

score 0 · Answer 7 · answered Aug 04 '14 at 03:48

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

Change css of class when select radio button

7 Answers7

DEMO