Input Radio value 属性
JavaScript基础 2022-06-08 16:20:42小码哥的IT人生shichen
Input Radio value 属性
定义和用法
value 属性设置或返回单选按钮的 value 属性的值。
对于单选按钮，value 属性的内容不会出现在用户界面中。value 属性仅在提交表单时才有意义。如果在提交表单时单选按钮处于选中状态，则单选按钮的名称与 value 属性的值一起发送（如果单选按钮未选中，则不发送任何信息）。
提示：请为同一组中的单选按钮定义不同的值，以便（在服务器端）识别哪个选项被选中。
另请参阅：
HTML 参考手册：HTML <input> value 属性
实例
例子 1
获取单选按钮的 value 属性的值：
var x = document.getElementById("myRadio").value;
完整实例：
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" value="red" id="myRadio">红色
<p>请点击“试一试”按钮，显示单选按钮的 value 属性的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myRadio").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 2
更改单选按钮的 value 属性的值：
document.getElementById("myRadio").value = "newRadioBtnValue";
完整实例：
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" value="red" id="myRadio">红色
<p>单击下面的按钮可显示和/或更改单选按钮的 value 属性的值。</p>
<button onclick="display()">显示名称</button>
<button onclick="change()">修改名称</button>
<script>
function display() {
var x = document.getElementById("myRadio").value;
alert("单选按钮的值为：" + x);
}
function change() {
var x = document.getElementById("myRadio").value = "newRadioBtnValue";
alert ("该值已更改为：" + x);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3
使用单选按钮和文本输入字段来显示所选单选按钮的值：
document.getElementById("result").value = browser;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>选择您喜欢的浏览器：</p>
<form action="/demo/htmldom/action_page.php">
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Firefox">Firefox<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Opera">Opera<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" onclick="myFunction(this.value)" value="Safari">Safari<br><br>
您最喜欢的浏览器是：<input type="text" id="result">
<input type="submit" value="提交表单">
</form>
<script>
function myFunction(browser) {
document.getElementById("result").value = browser;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 value 属性：
radioObject.value
设置 value 属性：
radioObject.value = text
属性值
| 值 | 描述 |
|---|---|
| text | 规定与输入关联的值（这也是提交时发送的值）。 |
技术细节
| 返回值： | 字符串值，表示单选按钮的 value 属性的值。 |
|---|
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
