小码哥的IT人生

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
支持 支持 支持 支持 支持

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024