Get Value of Radio Button Onclick

On this page we demonstrate and describe how to obtain the value of a radio button onclick. We demonstrate with the following form. Click on a radio button in the form and its value will be placed in the total field.

Demo: Get Value Onclick

Select your size: 

JavaScript to Access Radio Button Value Onclick

In order to access the value of a radio button onclick, start by obtaining a list containing references to the radio buttons in the group.[1] Then loop through the list and assign an onclick handler function to each radio button. The JavaScript for our example is shown here:

// get list of radio buttons with name 'size'
var sz = document.forms['demoForm'].elements['size'];

// loop through list
for (var i=0, len=sz.length; i<len; i++) {
    sz[i].onclick = function() { // assign onclick handler function to each
        // put clicked radio button's value in total field
        this.form.elements.total.value = this.value;
    };
}

When a radio button is clicked, its value is available inside the function assigned to the onclick property as this.value.[2] For our example, that function places the value of the clicked radio button into the total field of the form.

Example Form Markup

Markup for the example form is displayed here:

<form action="#" method="post" class="demoForm" id="demoForm">
    <fieldset>
        <legend>Demo: Get Value Onclick</legend>
    
    <p>Select your size:&nbsp;
        <label><input type="radio" name="size" value="5" /> Small</label>
        <label><input type="radio" name="size" value="8" checked="checked" /> Medium</label>
        <label><input type="radio" name="size" value="12" /> Large</label>
    </p>
    
    <p>
        <label>Total: $ <input type="text" name="total" class="num" value="8" readonly="readonly" /></label>
    </p>
    </fieldset>
</form>

Another example combines the above with toppings checkboxes for a more complete pizza order form.


  1. Find out more about Obtaining References to Forms and Form Elements. ^
  2. See JavaScript Event Handling for information on use of this inside event handler functions, plus more ways to attach event handlers. ^