My radio buttons aren’t letting me select only one, but are selecting each individually when clicked.

I was having troubles the other day when adding some radio buttons to a form. Since I don’t use them that often I had forgotten to make them work the way I needed.

Typically a radio button’s function is to allow a user to pick one choice from a list, and that choice will have a green mark in the radio button.

But when I was working with my radio buttons, there were two of them, when I previewed the file and tried clicking either button, the both stayed clicked. I couldn’t remember why that was, and then I figured out why. Because of the idea behind a radio button, where a checkbox is for a list of choices that a user can pick more than one, you need to label the buttons accordinly.

The radio buttons must have the same name in order to be clickable one or the other, like this;

Last Name - Rothe <input type=”radio” name=”name” />
Chapman <input type=”radio” name=”name” />

This code will spit out these two radio buttons and if you try them, by setting the “Name” to the same value, only one is clickable at once.

Last Name - Rothe
Chapman

Here are some similar arcade posts
Print This Post Print This Post

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

No comments yet.

Leave a comment

(required)

(required)