how to change css of radio button when clicked

Question

<style type="text/css">
.radiostyle {
    background-color: #999;
}
</style>

<label for="a1" class="radiostyle">
<Input type = radio Name = 1 Value = 100 Onclick="changecss()" id="a1">
100 bucks</label>

What is the code for the function changecss() so that when the radio button is clicked, the radio background changes to some other color, e.g. green. Please help, I've looked for hours online without a solution.

Would you be happy with a jQuery solution or does it have to be pure javascript? — Billy Moat, Sep 10 '12 at 14:27
How did you search for hours and not find a solution? http://xahlee.info/js/css_change.html (first google result) http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — jeremyharris, Sep 10 '12 at 14:29
Asked many times and easily googled. Also, there is a `:checked:` CSS3 pseudo-class that works without javascript. — Dmitry Pashkevich, Sep 10 '12 at 14:32
Welcome to Stack Overflow! We expect you to have attempted to solve this problem by yourself rather than asking the community to arrive at a complete solution for you. When you've got some code to show us that demonstrates some effort by you (even if it's wrong) please update your question and flag to re-open. Thanks. — Kev, Sep 11 '12 at 00:06

score 6 · Answer 1 · answered Sep 10 '12 at 14:38

6

You could use a only-CSS solution (CSS3):

HTML:

<input type="radio" name="1" value="100" id="a1">
<label for="a1" class="radiostyle">100 bucks</label>

CSS:

.radiostyle {
    background-color: #999;
}
input[type=radio]:checked+label {
/* Or `#a1:checked+label` if you only want it for that input */
    background-color: red;
}

http://jsfiddle.net/peSJG/

answered Sep 10 '12 at 14:38

Oriol

274,082
63
437
513

Hi, please see http://jsfiddle.net/JHMqG/ the solution works in the cat option, but does not work in the dog option which is what i really need help in. – user1660344 Sep 15 '12 at 09:19
@user1660344 Solved here: http://jsfiddle.net/JHMqG/5/ – Oriol Sep 17 '12 at 22:38

score 2 · Answer 2 · answered Sep 10 '12 at 14:32

2

Here's a quick jQuery example of how you could do it:

http://jsfiddle.net/NuzpR/

answered Sep 10 '12 at 14:32

Billy Moat

20,792
7
45
37

score 1 · Answer 3 · answered Sep 10 '12 at 14:30

1

function changecss() {
    var rb = document.getElementsByClassName('radiostyle');
    rb[0].style.backgroundColor = 'red';
}

jsFiddle example

answered Sep 10 '12 at 14:30

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Sep 10 '12 at 14:33

If you are using Jquery, you can do this:

$("#a1").click(changecss);

function changecss()
{
 $(this).parent().removeClass("radiostyle").addClass("selectedStyle");
}

For straight javascript, where selectedStyle has your style defined:

function changecss()
{
    this.parentNode.setAttribute("class", "selectedStyle");
}

score 0 · Answer 5 · answered Sep 10 '12 at 14:48

This should help you..

you have to use id attribute
get that element using getElementById()
Now change the attribute you like to

.radiostyle { background-color: #999; } .radiostyle1 { background-color: #ffff; }

<script type="text/javascript">
    function changecss()
    {
        var e= document.getElementById("a1");
        e.className="radiostyle1";
    }
</script>



 <label for="a1" id="a1" class="radiostyle">
    <Input type ="radio" id="r1" Name ="r1" Value = 100 Onclick="changecss()" id="a1">
    100 bucks
</label>

how to change css of radio button when clicked

5 Answers5