JavaScript and Form Radio Buttons

This part of the JavaScript and Forms Tutorial answers these common questions regarding JavaScript and form radio buttons:

• Is it better to use the onclick or onchange event for radio buttons?
• How do you get the value of the selected radio button in a group?
• How do you get the value of a radio button onclick?
• How do you select, deselect, or disable a radio button using JavaScript?
• How do you find out if the selected radio button is the one checked by default?

The pages listed above demonstrate, explain, and display the JavaScript.

Basic Facts about Radio Buttons

Radio buttons are set up in groups with each one having the same name as others in the group. Only one radio button in a group can be selected at a time. When another radio button in the group is clicked to select it, the previously selected one is deselected. Typical uses for radio buttons involve choices that are mutually exclusive, such as gender or shipping method.

When you use JavaScript to interact with radio buttons, you will most often be working with the checked and value properties. The onclick event will generally be favored over onchange. Find out why at Onclick vs. Onchange.