JavaScirpt Tutorial Index

JavaScript Tutorial Javascript Example Javascript comment Javascript Variable Javascript Data Types Javascript Operators Javascript If Else Javascript Switch Statement Javascript loop JavaScript Function Javascript Object JavaScript Arrays Javascript String Javascript Date Javascript Math Javascript Number Javascript Dialog Box Javascript Window Object Javascript Document Object Javascript Event Javascript Cookies Javascript getElementByID Javascript Forms Validation Javascript Email Validation Javascript Password Validation Javascript Re-Password Validation Javascript Page Redirect Javascript Print How to Print a Page Using JavaScript Textbox events in JavaScript How to find the largest number contained in a JavaScript Array?

Misc

JavaScript P5.js JavaScript Minify JavaScript redirect URL with parameters Javascript Redirect Button JavaScript Ternary Operator JavaScript radio button checked value JavaScript moment date difference Javascript input maxlength JavaScript focus on input Javascript Find Object In Array JavaScript dropdown onchange JavaScript Console log Multiple variables JavaScript Time Picker Demo JavaScript Image resize before upload Functional Programming in JavaScript JavaScript SetTimeout() JavaScript SetInterval() Callback and Callback Hell in JavaScript Array to String in JavaScript Synchronous and Asynchronous in JavaScript Compare two Arrays in JavaScript Encapsulation in JavaScript File Type Validation while Uploading Using JavaScript or jquery Convert ASCII Code to Character in JavaScript Count Character in string in JavaScript Get First Element of Array in JavaScript How to convert array to set in JavaScript How to get current date and time in JavaScript How to Remove Special Characters from a String in JavaScript Number Validation in JavaScript Remove Substring from String in JavaScript

Interview Questions

JavaScript Interview Questions

JavaScript radio button checked value

What are radio buttons?

A radio button is defined as an icon that is used to take input from the user. The user can choose only one option(value) from the group of radio buttons. Radio buttons are used for the single selection from multiple options in the group.

The radio group must have a common name. However, the value attribute is used to define the unique value associated with each radio button. 

The radio buttons are usually hollow circles.

The <input> tag is used to define a radio button.

Syntax:

<input type=”radio”>

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
         Javascript radio buttons
    </title>
</head>


<body>


<form>
     Which fruit do you like?<br>
    <input type="radio" name="fruit" value="Apple" id = "Apple">Apple<br>
    <input type="radio" name="fruit" value="Orange" id = "Orange" >Orange<br>
    <input type="radio" name="fruit" value="Banana" id = "Banana" >Banana<br>
    <input type="radio" name="fruit" value="Kiwi" id = "Kiwi">Kiwi<br>
    <input type="radio" name="fruit" value="Mango" id = "Mango">Mango<br>


</form>
<br>


<button onclick="submit()">Submit</button>






</body>
</html>

Output:

JavaScript Radio Button Checked Value

What is a checked value?

The value of the selected(marked) radio button in the whole group is known as the checked value.

In the above example, “orange” is the checked value.

Checked property in JavaScript

The checked property either sets or returns the status of radio buttons, i.e., helps to determine whether it is checked or not.

This property is supported by mostly all the browsers like Google chrome, safari, Microsoft Edge/Internet Explorer, Oracle, Firefox etc.

The following are the two ways the “checked” property can be used:

How to check the value in a radio button using JavaScript?

The checked property can be used to check or uncheck the value of any radio button.

NOTE: It is important to define an “id” for each radio button, to uniquely identify the buttons.

Syntax:

radioObject.checked = true or false

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
         Javascript checked value of radio button
    </title>
</head>


<body>


<form>
     Which fruit do you like?
    <input type="radio" name="fruit" value="Apple" id = "Apple">Apple
    <input type="radio" name="fruit" value="Orange" id = "Orange" >Orange
    <input type="radio" name="fruit" value="Banana" id = "Banana" >Banana
    <input type="radio" name="fruit" value="Kiwi" id = "Kiwi">Kiwi
    <input type="radio" name="fruit" value="Mango" id = "Mango">Mango


</form>
<br>
<button onclick="checkb()">Check "Banana"</button>
<button onclick="uncheckb()">Uncheck "Banana"</button>
<br><br>
<button onclick="checkm()">Check "Mango"</button>
<button onclick="uncheckm()">Uncheck "Mango"</button>


<script>
function checkb() {
  document.getElementById("Banana").checked = true;
}
function uncheckb() {
  document.getElementById("Banana").checked = false;
}
function checkm() {
  document.getElementById("Mango").checked = true;
}
function uncheckm() {
  document.getElementById("Mango").checked = false;
}
</script>


</body>
</html>

Output:

If “Check Mango” is selected,

JavaScript Radio Button Checked Value

If “Uncheck Mango” is selected,

JavaScript Radio Button Checked Value

NOTE: Even though the above example has two separate buttons to “check” the different radio buttons, but only one radio button can be selected at a time. If both the buttons are pressed, the button that was executed in the last, executes its function, and the other radio button gets unchecked automatically.

How to return the value of a checked radio button using JavaScript?

A user-defined function needs to be defined to return the value of the checked radio button. The function refers to all the radio buttons through name attributes. It uses the “checked” property to find the value of the selected radio button. 

The checked property returns a Boolean value: True or False.

  • “true” indicates that the radio button is selected.
  • “false” indicates that the radio button is not selected.

NOTE: In the case of web pages with multiple radio buttons, initially, all the user-defined function fetches all the <input> tags, then the <input> tags with type as "radio" are selected. These radio buttons are then selected and displayed.

Syntax:

radioObject.checked

Example 1:

Here the example shows the web page which contains a single checked Radio button, i.e. when only a single list is present,

<!DOCTYPE html>
<html>
  
<head>
    <title>
         Javascript checked value of radio button
    </title>
</head>
  
<body>
    <p>
        Select a radio button from the list given below and click on the button.
    </p>
      
    Which fruit do you like?
    <input type="radio" name="fruit" value="Apple">Apple
    <input type="radio" name="fruit" value="Orange">Orange
    <input type="radio" name="fruit" value="Banana">Banana
    <input type="radio" name="fruit" value="Kiwi">Kiwi
    <input type="radio" name="fruit" value="Mango">Mango
      
    <br>
      
    <button type="button" onclick="displayCheckedRadioValue()">
        Done
    </button>
      
    <br>
      
    <div id="content"></div>
      
    <script>
        function displayCheckedRadioValue() {
            var ele = document.getElementsByName('fruit');
              
            for(i = 0; i < ele.length; i++) {
                if(ele[i].checked)
                document.getElementById("content").innerHTML
                        = "Your preferred fruit is "+ele[i].value+ ".";
            }
        }
    </script>
</body>
</html> 

Output:

JavaScript Radio Button Checked Value

Example 2:

Here the example shows the web page which contains multiple checked Radio buttons(values of different lists),

<!DOCTYPE html>
<html>
  
<head>
    <title>
                 Javascript checked value of radio button
    </title>
</head>
  
<body>
    <p>
        Select a radio button from the list given below and click on the button.
    </p>
      
    Which fruit do you like?
    <input type="radio" name="fruit" value="Apple">Apple
    <input type="radio" name="fruit" value="Orange">Orange
    <input type="radio" name="fruit" value="Banana">Banana
    <input type="radio" name="fruit" value="Kiwi">Kiwi
    <input type="radio" name="fruit" value="Mango">Mango
    <br>
      
        Which vegetable do you like?
    <input type="radio" name="vegetable" value="Onion">Onion
    <input type="radio" name="vegetable" value="Capsicum">Capsicum
    <input type="radio" name="vegetable" value="Carrot">Carrot
    <input type="radio" name="vegetable" value="Potato">Potato
    <input type="radio" name="vegetable" value="Spinach">Spinach
      
    <br>
      
    <button type="button" onclick="displaycheckedRadioValue()">
        Done
    </button>
      
    <br>
      
    <div id="content"></div>
      
    <script>
        function displaycheckedRadioValue() {
            document.getElementById("content").innerHTML = "";
            var ele = document.getElementsByTagName('input');
              
            for(i = 0; i < ele.length; i++) {
                  
                if(ele[i].type="radio") {
                  
                    if(ele[i].checked)
                        document.getElementById("content").innerHTML
                                += ele[i].name + " preference is "
                                + ele[i].value + "."  + "<br>";
                }
            }
        }
    </script>
</body>
  
</html>

Output:

JavaScript Radio Button Checked Value