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?

[this page](http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) also gives a very simple, compliant and non-js solution — kewlashu, Aug 22 '12 at 10:07

score 15 · Answer 1 · answered Mar 10 '09 at 13:24

15

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

answered Mar 10 '09 at 13:24

Kev

15,899
15
79
112

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. – Kev Mar 10 '09 at 13:27
Despite not being totally cross-browser, this is a great solution. – nickf Mar 11 '09 at 01:42
Crossbrowser, I posted this while yours still said input[type="radio"][checked] and before you added span tags... – Kev Mar 11 '09 at 12:36

mbillard · Answer 2 · 2009-03-10T13:52:16.380

8

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)

edited Mar 10 '09 at 13:52

answered Mar 10 '09 at 13:16

mbillard

38,386
18
74
98

the input element itself doesn't have any text to make bold. – nickf Mar 10 '09 at 13:19

nickf · Answer 3 · 2009-03-11T01:46:53.027

4

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

edited Mar 11 '09 at 01:46

answered Mar 10 '09 at 13:23

nickf

537,072
198
649
721

Despite submitting a different answer, I think this is how it should be done. – defrex Mar 10 '09 at 13:24
Using an onChange event, and checking for the whether the radio button is selected. – Dominic Rodger Mar 10 '09 at 13:57
It would be onclick, for radio buttons. – bobince Mar 10 '09 at 13:59
What's the code? B/c things like $(':radio') appear to be jQuery specific. – Mar 10 '09 at 14:03
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. – nickf Mar 11 '09 at 01:44

score 2 · Answer 4 · answered Mar 10 '09 at 13:09

2

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

answered Mar 10 '09 at 13:09

Assaf Lavie

73,079
34
148
203

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. – Dominic Rodger Mar 10 '09 at 13:56

score 0 · Answer 5 · answered Mar 10 '09 at 13:12

0

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

answered Mar 10 '09 at 13:12

pestaa

4,749
2
23
32

It's possible to select by keyboard. Use the onChange event instead and inspect the 'this.checked' property. – spoulson Mar 10 '09 at 13:15
Also, the first solution will just leave anything you click as bold, rather than unbolding previous selections like it should. – Kev Mar 10 '09 at 13:32
Correct. I didn't think of onChange. nickf has a better implementation above. – pestaa Mar 10 '09 at 13:39
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. – bobince Mar 10 '09 at 14:01

score 0 · Answer 6 · answered Mar 10 '09 at 13:29

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_

Does this unbold selected radio button text in the event I change my answer choice? — , Mar 10 '09 at 14:02

score -1 · Answer 7 · answered Mar 10 '09 at 13:23

-1

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.

answered Mar 10 '09 at 13:23

defrex

15,735
7
34
45

There's no such event as HTMLLabelElement.onchange. – bobince Mar 10 '09 at 14:01

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

7 Answers7

Linked