Radio valueProperty
Radio Object
Definition and Usage
The value property sets or returns the value of the value attribute of a radio button.
For radio buttons, the content of the value attribute value does not appear in the user interface. The value attribute value is only passed to the server when the form is submitted. If a radio button is selected, its value is passed to the server when the form is submitted (unselected buttons do not pass data to the server).
Syntax
Set the value property:
radioObject.value="value"
Return the value property:
radioObject.value
Browser Support
All major browsers support the value property
Examples
Example 1
Display the selected value from the radio buttons:
<form>Which color do you prefer?<br>
<input type="radio" name="colors" id="red" value="red">Red<br>
<input type="radio" name="colors" id="blue" value="blue">Blue<br>
<input type="radio" name="colors" id="green" value="green">Green</form>
<button type="button" onclick="displayResult()">Display the selected value</button>
Try it Yourself »
Example 2
Display the selected radio button value:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example (example.com)</title>
<script>
function displayResult(browser){
document.getElementById("result").value=browser
}
</script>
</head>
<body>
<p>Choose your favorite browser:</p>
<form>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Firefox">Firefox<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Opera">Opera<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" onclick="displayResult(this.value)" value="Safari">Safari<br><br>Your favorite browser is:<input type="text" id="result">
</form>
</body>
</html>
Try it Yourself »
Radio Object Other Extensions