HTML DOM Radio value property
Radio Objects Definition and Usage
value property sets or returns the value of the property value of the radio button.
For radio buttons, the content value of the property value does not appear in the user interface. value attribute values pass data to the server only when the form is submitted. If a radio button is selected when the form is submitted, the value of the radio button will be transmitted to the server (the button is not selected data is not transmitted to the server side).
grammar
Set the value property:
radioObject.value="value"
Returns the value property:
radioObject.value
Browser Support
All major browsers support attribute value
Examples
Example 1
Show "Red" radio button values:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(){
var x=document.getElementById("red").value;
alert(x);
}
</script>
</head>
<body>
<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red" value="red">红色<br>
<input type="radio" name="colors" id="blue" value="blue">蓝色<br>
<input type="radio" name="colors" id="green" value="green">绿色
</form>
<button type="button" onclick="displayResult()">显示红色单选框的值</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(){
var x=document.getElementById("red").value;
alert(x);
}
</script>
</head>
<body>
<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red" value="red">红色<br>
<input type="radio" name="colors" id="blue" value="blue">蓝色<br>
<input type="radio" name="colors" id="green" value="green">绿色
</form>
<button type="button" onclick="displayResult()">显示红色单选框的值</button>
</body>
</html>
try it"
Example 2
Displays the selected radio button value:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.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: <input type = "text" id = "result">
</ Form>
</ Body>
</ Html>
<Html>
<Head>
<Meta charset = "utf-8">
<Title> This tutorial (w3big.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: <input type = "text" id = "result">
</ Form>
</ Body>
</ Html>
try it"
Radio Objects