Creating Groups of Radio Buttons

Its easy enough to create a single radio button. You write a small piece of code within your form to create the button and then supply some associated text. For example:

<input type="radio" value="blue" />blue

The problem is that one radio button by itself is pretty meaningless. So you code several more radio buttons but things still aren't working properly. The individual buttons can be selected or not completely independently of one another. What we need to do is to group the buttons together so that selecting one button will automatically unselect whichever button was previously selected.

To do this we add a name= parameter to all of the radio buttons within our group and supply the same value for the name in each case. Now when one button within the group having the same name is selected the previously selected button within that group is unselected. Supplying a name field also gives a name to the field that will contain the value for this radio button group. As each radio button should have a different value field assigned to it the field will be assigned the value associated with the selected button. We can even pre-assign one of the buttons to be selected by adding checked="checked" to that button.

So now we have one radio button group created and working but what if we want more than one group within the same form like this:


Well the code that I used to create the above radio buttons is as follows:

 <input type="radio" value="1" name="size" 
checked="checked" />small<br />
<input type="radio" value="2" name="size" />medium<br />
<input type="radio" value="3" name="size" />large<hr />
<input type="radio" value="red" name="colour"
checked="checked" />red<br />
<input type="radio" value="green" name="colour" />green<br />
<input type="radio" value="blue" name="colour" />blue

As you can see the difference between the first and second groups of radio buttons is that the groups have different names. The first group is called size and will be assigned a value of 1, 2, or 3 depending on which radio button in the first group is selected. The second group is called colour and will be assigned a value of "red", "green", or "blue" depending on which button in that group is selected.

In this instance I have assigned the first button in each group to be the default. This saves having to validate the radio buttons because you will know that a valid value is always selected. If you decide that setting a default value is not appropriate then you will need to validate the radio buttons. See the page Validating Radio Buttons for how to set up a javascript to validate one group of radio buttons (substitute the name of the group for 'myradiobuttons' in the code. To validate more than one group of radio buttons you will need to repeat the code that validates the first group of buttons and substitute the name of the second group in this copy of the code.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow