I just came across a need to do some JavaScript validation for radio buttons and had the pleasure of being reminded that radio buttons aren’t referenced as other form elements are. I decided to throw together this quick tutorial as a reminder of how to do it.

If you need to validate radio buttons with JavaScript, or want to see if a particular choice has been made, this article will help you.

Checked?

Yes, checked. I realize that, semantically, a radio button should be “selected” and a checkbox should be “checked.” However, JavaScript uses the keyword “checked” for both.

Reference a Single Radio Button

First of all, any element can be reference by id. I bet you already knew that, but I will share anyway. If you simply want to find out if a specific radio button has been checked in a form, that’s easy: reference it using id. Since id is a unique field, you can easily reference it that way and quickly know if it is selected.

JAVASCRIPTview code
<form name="myform">
    <label for="radio1">Solidly</label>
    <input id="radio1" type="radio" name="preference" value="solidly" />
    <label for="radio2">Stated</label>
    <input id="radio2" type="radio" name="preference" value="stated" />
</form>
<script type="text/javascript">
    // reference by ID
    alert(document.myform.radio1.checked);
</script>

Reference a Group of Radio Buttons

Normally, you reference form inputs and select elements with document.nameOfForm.nameOfElement. However, if you try to reference a radio button in this manner, it will return an array.

You can then loop through this array, which is helpful if you want to validate that a choice has been made.

JAVASCRIPTview code
<form name="myform">
    <label for="radio1">Solidly</label>
    <input id="radio1" type="radio" name="preference" value="solidly" />
    <label for="radio2">Stated</label>
    <input id="radio2" type="radio" name="preference" value="stated" />
</form>
<script type="text/javascript">
    var choicemade = false;
    for (var i = 0; i < document.submission[elname].length; i++){
        if(document.submission.preference[i].checked){ choicemade = true; }
    }
    if(choicemade){ alert("choice made"); } else { alert("choice not made"); } 
</script>

This technique is a must for your front-end form validation.

In the above example, I simply set a variable (“choicemade”) to false and then loop through the radio button array and see if it finds one that has been checked. If it does, then it sets the variable to true.

Be Warned

You are probably used to referencing form elements by id (which is great).

When referencing by name however, you cannot reference the element from a string variable.

What I mean by that is:

JAVASCRIPTview code
<form name="myform">
    <label for="radio1">Solidly</label>
    <input id="radio1" type="radio" name="preference" value="solidly" />
    <label for="radio2">Stated</label>
    <input id="radio2" type="radio" name="preference" value="stated" />
</form>
<script type="text/javascript">
    var element = "preference";
    document.submission.element; // THIS WILL RETURN UNDEFINED
 
    document.submission.preference; // THIS WILL WORK
</script>