Jquery - Change radio button text color

Question

I have radio buttons as follows:

<input type='radio' name='ans' value='0'> Dog
<input type='radio' name='ans' value='1'> Horse
<input type='radio' name='ans' value='2'> Cat
<input type='radio' name='ans' value='3'> Camel

<input type="button" value="Change Color" onclick="changeColor()" />

When i click the button, i want a certain radio button text to turn Green in color.
For eg. if the correct answer(value='2') is Cat, then Cat text should be turned green.

Here's an incomplete function - i guess i am missing the part that selects the radio button based on value:

var changeColor = function()
    {
        $("input[name=ans]").css('color', 'green');
    }

You need to wrap the text in `label` or `span` and then provide style to it — Pranav C Balan, Mar 10 '16 at 05:33
Using jquery is best i think. and also wrap the radio button and the text also good idea. — Murad Hasan, Mar 10 '16 at 05:34
It's bad practice to use JS for this. See my answer for the CSS solution (best practice). — rrowland, Mar 10 '16 at 06:49
Also see http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label — rrowland, Mar 10 '16 at 06:50

Manish Jangir · Accepted Answer · 2016-03-10T06:07:28.340

2

Your working code:

<form id="radioForm">
    <label><input type="radio" name="ans" value="0">Dog</label>
    <label><input type="radio" name="ans" value="1">Horse</label>
    <label><input type="radio" name="ans" value="2">Cat</label>
    <label><input type="radio" name="ans" value="3">Camel</label>
    <input type="button" id="changeColor" value="Change Color" />
</form>
<script>
    $(document).on('click','#changeColor',function(){
      var $radio = $(this).closest('form').find('input[type="radio"]:checked');
      $('label').css('color','#000');
      $radio.closest('label') .css('color','green');
    });
</script>

edited Mar 10 '16 at 06:07

answered Mar 10 '16 at 05:32

Manish Jangir

5,329
4
42
75

It will always turn `cat green` every time what ever user checks, this is not OP has questioned about, – Sindhoo Oad Mar 10 '16 at 05:52
on button click not on radio button check :) – Sindhoo Oad Mar 10 '16 at 06:03
Don't use JavaScript to set styles that can be set with CSS. That's what CSS is for. – rrowland Mar 10 '16 at 06:06
@ManishJangir It is right now but we all got -1 for using JS lol by same user who is doing this in CSS :D – Sindhoo Oad Mar 10 '16 at 06:10
What do you mean by getting -1 – Manish Jangir Mar 10 '16 at 06:12
I meant our answers has been down voted @ManishJangir . – Sindhoo Oad Mar 10 '16 at 06:20

score 0 · Answer 2 · answered Mar 10 '16 at 05:37

It might be easier for you to use labels with your inputs.

Something like the following:

HTML

<label class='0'>Dog</label>
    <input type='radio' name='ans' class='checkbox-option' value='0'>

JQuery

if ( $('.checkbox-option').prop('checked') )
{ 
    var className = $(this).val();
    $('.'+className).css('color', 'green');
}

I haven't tested this but I would imaging something similar to this would work.

score 0 · Answer 3 · answered Mar 10 '16 at 05:49

0

You want to change the color which is selected all other back to black. Try this

function changeColor ()
    { 
        $("input[name=ans]").next().css('color', 'black')
        $("input[name=ans]:checked").next().css('color', 'green');
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type='radio' name='ans' value='0'> <label>Dog</label>
<input type='radio' name='ans' value='1'> <label>Horse</label>
<input type='radio' name='ans' value='2'> <label>Cat</label>
<input type='radio' name='ans' value='3'> <label>Camel</label>


<input type="button" value="Change Color" onclick="changeColor()" />

answered Mar 10 '16 at 05:49

Sindhoo Oad

1,194
2
13
29

Don't use JavaScript to set styles that can be set with CSS. That's what CSS is for. – rrowland Mar 10 '16 at 06:07
OP doesn't know better. He's using JS because he doesn't know it's possible with CSS. – rrowland Mar 10 '16 at 06:47
@rrowland OP's acceptance of answer have said it all :) – Sindhoo Oad Mar 10 '16 at 08:45
Yes, it has confirmed that he doesn't understand best practices and was enabled by people who should have taken the opportunity to teach a new developer, rather than trying to win points. Answers given here should be useful information for all users that have this question, not a quick fix for the user asking the question. – rrowland Mar 10 '16 at 17:39
@Jasper I dont know , may b someday SO allows us to see users who upvotes or downvotes :P – Sindhoo Oad Mar 12 '16 at 05:58

score 0 · Answer 4 · edited Mar 10 '16 at 07:03

Jasper could you please check the below link:

fiddle

<script>

    $(document).ready(function() {

        var changeColor = function() {

        $('input[name=ans]').next().css('color', 'black');

        $('input[name=ans]').each(function(){
            _this = $(this);

            if(_this.is(':checked') == true) {
                _this.next().css('color', 'green');
            }

         });
     }

     $('#changeColor').click(function(){

      changeColor();

     });

    });

</script>

    <input type='radio' name='ans' value='0'> <span>Dog</span>
    <input type='radio' name='ans' value='1'> <span>Horse</span>
    <input type='radio' name='ans' value='2'> <span>Cat</span>
    <input type='radio' name='ans' value='3'> <span>Camel</span>

    <input type="button" value="Change Color" id="changeColor" />

I have created jsfiddle for this. Hope this helps.

rrowland · Answer 5 · 2016-03-10T06:03:26.580

-1

The proper way to style a page is is with CSS. It's bad practice to code this up in JS.

HTML

<input type='radio' name='ans' value='0' id='ans-dog'/>
<label for='ans-dog'>Dog</label>
<input type='radio' name='ans' value='1' id='ans-horse'/>
<label for='ans-horse'>Horse</label>
<input type='radio' name='ans' value='2' id='ans-cat'/>
<label for='ans-cat'>Cat</label>
<input type='radio' name='ans' value='3' id='ans-camel'/>
<label for='ans-camel'>Camel</label>

CSS

input[type="radio"] + label {
    color: black;
}

input[type="radio"]:checked + label {
    color: green;
}

edited Mar 10 '16 at 06:03

answered Mar 10 '16 at 05:57

rrowland

2,734
2
17
32

@Jasper Might I suggest choosing it as your answer, in that case? – rrowland Mar 11 '16 at 22:50

Jquery - Change radio button text color

5 Answers5