Being Obvious With Radio Button Checks

With a set of radio buttons, there is only a dot in the button to indicate which has been checked. Some browsers change the background color of the button, too.

This article provides a reason for making the checked status of certain radio buttons much more obvious — and a way for doing so.

When it must be obvious to the user which button is checked, so immediately obvious they are unlikely to assume anything different, then drawing additional attention to it is prudent.

When the result of proactive action is according to expectations, it is more likely to be associated with pleasant experience. And vice versa.

Here is an example.

Inadvertent incorrect radio button selection is just one of the things that can ruin a pleasant experience or have unpleasant consequences. This article describes how to make that less likely to happen.

To make it more obvious which radio button is checked, put the button and its label text into a label tag. Then change the label's CSS style.

The label text might be bolded or its color changed. The selection might be bordered. Even the background color might be changed.

(Putting each radio button and its associated label text into a label tag has the added benefit of making the button turn on when the user taps the text.)

Here are two examples of obvious radio button selection. Both change the text of the checked button to bold. And there is a thick top border.

Just One

Two of them

Three!

Red

Blue

Gold

Implementing Obvious Radio Button Checks

The method provided here requires a JavaScript function on the page. And an onclick attribute for the radio button fields.

The JavaScript

In the function source code, the CSS style for the checked radio button label text is specified.

Here is the source code. A customization note follows.

function UpdateRadioLabelStyles(d)
{
   var checkedStyle = "font-weight:bold; border-top:9px solid black;";
   var name = d.name;
   var each = document.getElementsByName(name);
   for( i=0; i<each.length; i++ )
   {
      var node = each[i].parentNode;
      if(each[i].checked) { node.style = checkedStyle; }
      else { node.style = ""; }
   }
}

Customization

At the first executable line of the JavaScript function, you'll see this.

var checkedStyle = "font-weight:bold; border-top:9px solid black;";

Replace this:

font-weight:bold; border-top:9px solid black;

with your preferred CSS style for the radio button label when the radio button is checked. The style needs to be all one line.

The Radio Button Field

The radio button field needs this attribute:

onclick="UpdateRadioLabelStyles(this)"

The radio button field and the button's label text must be within HTML label tags. "Label text" may be text and/or images. Here is an example.

<label><input type="radio" name="testing" onclick="UpdateRadioLabelStyles(this)" value="one">Label Text</label>

When these 3 steps have been done, you are good to go:

1. The JavaScript is on the page.

2. Each radio button tag has the onclick attribute.

3. Each radio button and its text label are between label tags.

When it is important that there is no question about which radio button is checked, it is prudent to make the selection obvious.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager