How to change the style of a radio button with javascript when clicked

Question

I have an order form that has three sets of radio button options. Ultimately, I would like to have the text of the radio button in each group change to bold and red when it is clicked. However, I'm not having any luck just changing the color of even one group. Below is the loop I was using to try to change one group of radio buttons. My logic was to go through the group of radio buttons and if one of them were clicked it would change the style of the text. What am I doing wrong with this function?

 function highlight() {

     var radios = document.getElementsByName('cases');

     for (var i = 0; i < radios.length; i++) {
         if (radios[i].checked == true) {
             return document.getElementByName.style.color = 'red';
         }
     }

 }

This is one group of radio buttons in my code. The other two groups are similar:

 <input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/> Desktop Case ($500.00) </br>

 <input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/> Mini-Tower Case ($600.00) </br>

 <input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> Full-Tower Case ($700.00) </br>

Any help would be greatly appreciated.

@TJonS you want to include a whole library to change the color of some text? — Evan Davis, Dec 03 '13 at 15:22
You can do this by CSS. You will find an example in this [post](http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) — Kai Döhler, Dec 03 '13 at 15:24

David Thomas · Answer 1 · 2013-12-03T15:37:33.847

If you amend your code, and wrap the text in a label element and, incidentally, you can't change the color or font-weight properties of text unless it's wrapped in an element, and that would have to be a separate element for each string of text you want to affect :

<input id="case1" type="radio" name="cases" value="500.00" onclick="highlight()"/><label for="case1">Desktop Case ($500.00)</label>
<input id="case2" type="radio" name="cases" value="600.00" onclick="highlight()"/><label for="case2">Mini-Tower Case ($600.00)</label>
<input id="case3" type="radio" name="cases" value="700.00" onclick="highlight()"/> <label for="case3">Full-Tower Case ($700.00)</label>

You can achieve this with just CSS:

input[type=radio]:checked + label {
    color: red;
    font-weight: bold;
}

JS Fiddle demo.

Incidentally, to use plain JavaScript I'd suggest:

function choiceHighlight(radio){
    var groupName = radio.name,
        group = document.getElementsByName(groupName);
    for (var i = 0, len = group.length; i < len; i++){
        group[i].nextSibling.className = group[i].checked ? 'chosen' : 'unchosen';
    }
}

var radios = document.getElementsByName('cases');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', function(){
        choiceHighlight(this);
    });
}

JS Fiddle demo.

Stuart Kershaw · Answer 2 · 2013-12-03T15:50:23.730

Your return statement looks off:

return document.getElementByName.style.color = 'red';

Also note that you've attempted to give the radio inputs a color of red, but they cannot be styled in this way. The text that you have next to the inputs is not part of the input itself.

Here's a simplified script that gets you the input values onchange (not onselect). You should be able to use this as a better starting point: http://jsfiddle.net/rWp6E/

var radios = document.getElementsByName('cases');

 for (var i = 0; i < radios.length; i++) {
     radios[i].onchange = function () {
         alert(this.value);
     }
 }

ElGavilan · Answer 3 · 2013-12-03T15:38:37.457

getElementByName isn't valid Javascript. A better way to do this would be to use the onCheckedChanged event to change your style:

<input id="case1" type="radio" name="cases" oncheckedchanged="highlight(this)" value="500.00"/>

<script type="text/javascript">
function highlight(e) {
   if(e.checked == true)
      {e.style.color = "red"}
   else
      {e.style.color = "some other color"}
}

Note that you will actually have to change the style of the label if you want to change the color of the text.

There is also a :checked selector in CSS3 (as someone else mentioned above), however it will not work in some older browsers, namely IE8 and earlier.

How to change the style of a radio button with javascript when clicked

3 Answers3

Linked