How do you make an HTML Radio button bold on select ???

In HTML, I have the following radio button choices

o Choice 1
o Choice 2
o Choice 3

What I would like to do is when someone SELECTs a radio button from above, that the text corresponding to that radio button selected becomes bold.

So, for example - if the person selects "Choice 2", the radio button selection would now look like:

o Choice 1
o Choice 2
o Choice 3

How do I do this? I assume either JavaScript or CSS has to be used.

Thanks in advance

UPDATE: How would you implement "nickf" solution without using jQuery?

From stackoverflow

• This might help you get started: Styling radio buttons with CSS

• Use the OnChange event of your select to change the css style of the chosen element to bold.

  Dominic Rodger : You can't use that to change the style of the button itself - only the textual label can be changed like that. If you look at his question, he seems to want the little circle bold as well.

• <input type=button onClick="this.style.fontWeight=bold">
  

  This might work, I didn't test by myself. Of course there are much nicer solutions.

  If you had a JavaScript framework (like jQuery) inserted in your code, it probably has many function available to do the same. Selectors, stylers, css-handlers and many more.

  I'd rather suggest creating a CSS class like this:

  .felkover
  {
      font-weight: bold;
  }
  

  Then simply add or remove this definition in the class attribute of any given button.

  spoulson : It's possible to select by keyboard. Use the onChange event instead and inspect the 'this.checked' property.

  Kev : Also, the first solution will just leave anything you click as bold, rather than unbolding previous selections like it should.

  pestaa : Correct. I didn't think of onChange. nickf has a better implementation above.

  bobince : onchange is not reliable on radio buttons, but onclick is fired even on non-mouse activation. Also of course ‘this.style.fontWeight’ will do nothing on the radio button itself, it is the label that's important.

• You could try doing everything with CSS.

  I tried this and it works¹:

  <input type="radio" name="choice" value="1" checked /><span>First choice</span>
  <input type="radio" name="choice" value="2" /><span>Second choice</span>
  
  input[type="radio"]:checked + span
  {
      font-weight: bold;
  }
  

  Explanation: This catches all spans following a radio input (type="radio") and is checked.

  ¹ I tested with Firefox 3 and IE7 and it only worked with Firefox. (compatibility reference)

  nickf : the input element itself doesn't have any text to make bold.

  GoodEnough : @nickf right, fixed that

  GoodEnough : I changed it to make it work, but it only works in Firefox.

• I'd do something like this:

  <label><input type="radio" name="myRadio" value="1" /> One</label>
  <label><input type="radio" name="myRadio" value="2" /> Two</label>
  <label><input type="radio" name="myRadio" value="3" /> Three</label>
  

  With an onchange handler on each element to change the CSS class of the parent label. In jQuery it would look like this:

  $(':radio').change(function() {           // get all the radio buttons and
                                            // add an onchange handler
      var $label = $(this).parent('label'); // get a reference to the parent label
      if (this.checked) {                   // if the radio is on...
          $label.addClass('selected');      // add the CSS class "selected" to the label
      } else {                              // otherwise...
          $label.removeClass('selected');   // take the class away.
      }
  });
  

  Just remember to override the default style for labels (which is bold):

  label {
      font-weight: normal;
  }
  label.selected {
      font-weight: bold;
  }
  

  defrex : Despite submitting a different answer, I think this is how it should be done.

  Dominic Rodger : Using an onChange event, and checking for the whether the radio button is selected.

  bobince : It would be onclick, for radio buttons.

  nickf : yes, the sample I posted was using jQuery, though it should be legible enough as pseudo-code for it to be rebuilt using plain javascript. I'll comment it to make it easier to read.

• amusing your buttons have labels around them to include the text, I would add this to the labels.

  <label onchange="this.parent.children.fontWeight='normal';this.fontWeight='bold';">
  

  Though ideally I'd not put this code inline, but hook it to them from somewhere in the head after the page has loaded.

  bobince : There's no such event as HTMLLabelElement.onchange.

  defrex : lol, that is completely true. I guess I wasn't thinking.

• You can do this purely with CSS, but you need to wrap the text of each input in a span or other tag:

  <input type="radio" name="group1" value="Milk"><span>Milk</span><br>
  

  Then just use the sibling selector:

  input[type="radio"]:checked+span { font-weight: bold; }
  

  Kev : BTW, I tested this just now and it works at least in FF2.

  Kev : According to http://www.quirksmode.org/css/contents.html it probably won't do anything (i.e., will 'degrade gracefully' :) ) in IE6, but other browsers should handle it fine.

  GoodEnough : wow, exactly like my answer

  nickf : Despite not being totally cross-browser, this is a great solution.

  Kev : Crossbrowser, I posted this while yours still said input[type="radio"][checked] and before you added span tags...

  GoodEnough : @Kev, maybe anyway at least the good answer is on top

• Here is an example :

  <script>
    function makeBold()
    {
      var radios = document.getElementsByName("sex");
      for (var index = 0; index < radios.length; index++)
      {
        if (radios[index].checked)
        {
          document.getElementById("span_" + radios[index].value).style.fontWeight='bold';
        }
        else
        {
          document.getElementById("span_" + radios[index].value).style.fontWeight='normal';
        }
      }
    }
  </script>
  
  <input type="radio" name="sex" value="male" onclick="makeBold();"> 
  <span id="span_male">Male</span>
  
  <br>
  <input type="radio" name="sex" value="female" onclick="makeBold()"> 
  <span id="span_female">Female</span>
  

  EDIT : You should define your text spans with ids like that : span_

  Canavar : yes, copy it in a HTML file and try :)