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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

<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.

Answer 4

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)

Answer 5

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

Answer 6

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.

Answer 7

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

Answer 8

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_