HTML DOM Radio value 屬性
Radio對象 定義和用法
value 屬性可設置或返回單選按鈕的value 屬性的值。
對於單選按鈕，value屬性值的內容不會出現在用戶界面。 value 屬性值只在提交表單時向服務端傳遞數據。 如果一個單選按鈕處於選中狀態，在提交表單時，單選按鈕的值才會傳遞到服務端（未選中按鈕是不會傳遞數據到服務端的）。
語法
設置value 屬性:
radioObject.value="value"
返回value 屬性:
radioObject.value
瀏覽器支持
所有主要瀏覽器都支持value 屬性
實例
實例1
顯示"Red" 單選按鈕的值:
<!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>
嘗試一下»
實例2
顯示選定的單選按鈕值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(browser){
document.getElementById("result").value=browser
}
</script>
</head>
<body>
<p>選擇你最喜歡的瀏覽器:</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>
你最喜歡的瀏覽器是: <input type="text" id="result">
</form>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<script>
function displayResult(browser){
document.getElementById("result").value=browser
}
</script>
</head>
<body>
<p>選擇你最喜歡的瀏覽器:</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>
你最喜歡的瀏覽器是: <input type="text" id="result">
</form>
</body>
</html>
嘗試一下»
Radio對象