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 | Using the *label* tag | Adding IDs | Code that makes it work | Determining which option is selected | Group border


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

I am not sure why, but it is not necessary to close the label tags. 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.


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


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!

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.

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!

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



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. However, that places the title inside the border. If you prefer to place the title in the border - use fieldset and legend. However, now the width is a problem. That is fixed by wrapping the fieldset in a table. Good - but I still prefer the table's border. That is fixed via css.


Author: Robert Clemenzi
URL: http:// mc-computing.com / Languages / Javascript / RadioButtons.html