Skip to main content | Turn off styling Default page style

Question & Answer index

Working with Radio Buttons

The question about how to handle radio buttons comes up so often, that I'm dedicating an entire page to show how to get values and how validation should be done.

Here is a quick look at how to write a function using jQuery to return the value for the user-selected radio button.

Here is the same demo, but using javascript.

With either of those functions in place, you are now ready to do validation!

For this demo, let's presume you have one question with 4 options and the user must select at least one answer, such as the following:

How many pecks are in a bushel?
validate

Here is the HTML for the question setup and the call to the validation function.

Here is how the validation looks - notice that in order to maximize reusability, validation is its own function and the validation of each question is its own function. Though a bit tedious for such a short demo as this, the approach minimizes the number of times you must repeat the same lines of code and allows you to easily modify the questions (e.g., from radio button to a select-box).