Javascript Radio Buttons

Javascript - Radio Buttons

Radio Buttons are one of the standard form objects. Unfortunately, the basic implementation only supplies the buttons - the information provided on this page makes them a bit more useful.

Basic buttons

Radio Buttons are used because only one of several related options can be selected. To define a group, all the related buttons are given the same name. The key word CHECKED (not case sensitive) indicates the default value. However, as you can see, the input type="radio" tags only display a round radio button without any text.

Default behavior	Code - clicking the text does nothing
%RH Over Water %RH Over Ice Mixing Ratio (ppm)

By default (in Chrome), you have to click the small round button to make a selection. That's ridiculous!

Using the label tag

In user friendly apps, you can also click on the describing text.

In order to associate the text with the buttons (ie, make it clickable), use the label tag. I have verified that it works in IE8 and Chrome 49.

Desired behavior	Code using <label> tags
%RH Over Water %RH Over Ice Mixing Ratio (ppm)

I am not sure why, but it is not necessary to close the label tags when using a table. Using the Chrome 49 code inspector (other browsers may be different), the tags in the example were nested and all 3 were automatically closed before the start of the next table column.

! added 05-23-19 > The tags must be closed in most other cases.

Adding IDs

Before learning how to use label tags, I developed another way to make the text clickable - this is significantly more complex and uses javascript .. but it works. The examples on this page will not work with older browsers (such as IE8), but the libraries that implement this capability have extra code so that they will. I have left this and the next sections in because they took significant effort to develop and they present several javascript issues.

Desired behavior
%RH Over Water %RH Over Ice Mixing Ratio (ppm)

This works by adding a unique ID to each button and the text after it. The buttons are easy - just add an ID. For the text, I tried using <div>, but that placed the text on a separate line. Therefore, I used <span> (which works).

<br><input type="radio" name="rg1" id="rg1_0" value="0" checked> <span id=rg1_0t>%RH Over Water</span> <br><input type="radio" name="rg1" id="rg1_1" value="1"> <span id=rg1_1t>%RH Over Ice</span> <br><input type="radio" name="rg1" id="rg1_2" value="2"> <span id=rg1_2t>Mixing Ratio (ppm)</span>

The button ID values are not important - they just have to be unique. To simplify the code (see the next section), each text string has the identical ID as its associated button .. plus the letter -t- (for text) added to the end.

Code that makes it work

There are many ways to define click events to implement the desired behavior. This is just one possibility. Since the IDs of the text and associated button differ by only one letter, it is possible to define a function that accepts one ID and makes the desired association.

window.onload = function() {
  AssociateRadioButton('rg1_0'); // called for each button
  AssociateRadioButton('rg1_1');
  AssociateRadioButton('rg1_2');
}

// This configures the identifying string's click event so that
// the associated radio button is selected (checked) when the identifying string is clicked
function AssociateRadioButton(idName)
{
  document.getElementById(idName+'t').addEventListener("click", 
   function() { document.getElementById(idName).checked = true;} ) ;}

getElementsByName

The next obvious step was to add additional code so that I wouldn't have to call each button by name. The following attempt failed!

window.onload = function() {
  mcInitRadioButtons('rg1');
}

function mcInitRadioButtons(groupName)
{
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    var Radio_ID     = RadioGroup[i].id;
    var Text_Element = document.getElementById(Radio_ID+'t');
    if (Text_Element ) {
      Text_Element.addEventListener("click", function() { RadioGroup[i].checked = true; } );
    }
  }
}

That code should have worked! However .. RadioGroup[i] was not evaluated. Instead, it was placed in the function as typed. Therefore, when the text was clicked, i was equal to 3. It did not matter which of the 3 lines of text was clicked, none of them worked!

Next I tried this - but all 3 elements pointed to the last radio button.

function mcInitRadioButtons(groupName)
{
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    var Radio_ID      = RadioGroup[i].id;
    var Radio_Element = RadioGroup[i];
    var  Text_Element = document.getElementById(Radio_ID+'t');
    if (Text_Element ) {
      Text_Element.addEventListener("click", function() { Radio_Element.checked = true; } );
    }
  }
}

Javascript sucks !!!

The problem is do to something called Closure. This is complete nonsense. Who designs a language like this without a way to overcome this serious limitation.

At any rate, the following code works. It is not as efficient as I was trying to be, but it works!

function mcAssociateRadioButton(idName)
{
  document.getElementById(idName+'t').addEventListener("click", 
   function() { document.getElementById(idName).checked = true;} ) ;
}

function mcInitRadioButtons(groupName)
{
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    var Radio_ID      = RadioGroup[i].id;
    var  Text_Element = document.getElementById(Radio_ID+'t');
    if (Text_Element ) {
      mcAssociateRadioButton(Radio_ID);
    }
  }
}

I was able to make it slightly more efficient by using the following since it does not have to execute getElementById every time the button is clicked.

window.onload = function() {
  mcInitRadioButtons('rg1'); // call with the name of the radio group
}

// This configures the identifying string's click event so that
// the associated radio button is selected (checked) when that string is clicked
function mcAssociateRadioButton(idName)
{
  var UIElement = document.getElementById(idName);

  document.getElementById(idName+'t').addEventListener("click", 
   function() { UIElement.checked = true;} ) ;
}

function mcInitRadioButtons(groupName)
{
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    var Radio_ID      = RadioGroup[i].id;
    var  Text_Element = document.getElementById(Radio_ID+'t');
    if (Text_Element ) {
      mcAssociateRadioButton(Radio_ID);
    }
  }
}

Just call it with the name of the radio group and it should work.

Determining which option is selected

When running code on a server, it is easy to determine which option is selected. However, when the code is in a web page ....

The code below contains 2 functions - they both return the value assigned to the checked Radio Button in the specified Radio Group (the group of Radio Buttons with the same name).

One returns a string
The other returns a number (multiplying a numeric string by one converts it to a number)

  switch (mcRadioGroupIndex("rg1")) {
    case 0:  func_0(); break;
    case 1:  func_1(); break;
    case 2:  func_2(); break;
  }

//  mcRadioGroupIndex(groupName)  returns a number - values should be integers
//  mcRadioGroupValue(groupName)  returns a string - for non-integer values

function mcRadioGroupIndex(groupName)
{
  return mcRadioGroupValue(groupName)*1; // convert a string to a number
}

function mcRadioGroupValue(groupName)
{
  var result = 0;
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    if(RadioGroup[i].checked == true) {
       result = RadioGroup[i].value;
    }
  }
  return result;
}

Setting an Option

This code will set an option

function mcRadioGroupSetValue(groupName, value)
{
  var val = String(value); // allows numbers or strings
  var RadioGroup = document.getElementsByName(groupName);

  for(var i = 0; i < RadioGroup.length; i++) {
    if(RadioGroup[i].value == val) {
       RadioGroup[i].checked = true;
    }
  }
}

Test of setting the options
%RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

Group border

Radio Buttons are normally placed together in a group. To make the grouping more obvious, I like the look of a table border.

Group name
%RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

However, that places the title inside the border. If you prefer to place the title in the border - use fieldset and legend.

Group name %RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

However, now the width is a problem. That is fixed by wrapping the fieldset in a table.

Group name %RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

<ul><table> <tr><td><fieldset> <legend><b>Group name</b></legend> <input type="radio" name="rg1_fs2" id="rg1_0_fs2" value="0" checked> <span id=rg1_0_fs2t>%RH Over Water</span> <br><input type="radio" name="rg1_fs2" id="rg1_1_fs2" value="1"> <span id=rg1_1_fs2t>%RH Over Ice</span> <br><input type="radio" name="rg1_fs2" id="rg1_2_fs2" value="2"> <span id=rg1_2_fs2t>Mixing Ratio (ppm)</span> </fieldset> </table></ul>

Good - but I still prefer the table's border. That is fixed via css.

Group name %RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

Default

Alternate

.fs_default{
  border-style: groove;
  border-width: 2px;
}

.fs_test{
  border-style: ridge;
  border-width: 3px;
}

Group name %RH Over Water
%RH Over Ice
Mixing Ratio (ppm)

Like the table

.fs_double{
  border-style: double;
  border-width: 4px;
  border-color: black;
}

onclick

To trigger an action when any one of a group of radio buttons changes, an onclick event must be added to each individual button. Example from w3schools

<input type="radio" name="browser" onclick="myFunction(this.value)" value="Internet Explorer">Internet Explorer<br> <input type="radio" name="browser" onclick="myFunction(this.value)" value="Firefox">Firefox<br> <input type="radio" name="browser" onclick="myFunction(this.value)" value="Opera">Opera<br>

That technique has the advantage that it passes the button's value.

The question is - Is there a way to assign a function without modifying each button?

Perhaps fieldset would work.

Internet Explorer
Firefox
Opera

The function gets called anytime anything in the fields set gets clicked. Also when the keyboard is used to select a new button. (Use the cursor keys.) Be sure that at least one of the options is checked when the form opens.

<ul><table><tr><td> <fieldset onclick="myLabelFunction()" > <label><input type="radio" name="browser" checked" value="Internet Explorer">Internet Explorer</label><br> <label><input type="radio" name="browser" value="Firefox">Firefox</label><br> <label><input type="radio" name="browser" value="Opera">Opera</label><br> </fieldset> </table></ul>

Author: Robert Clemenzi