Radio对象

最新推荐文章于 2021-06-09 17:54:51 发布

pinkdown

最新推荐文章于 2021-06-09 17:54:51 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/weixin_44764207/article/details/102768482

版权

Radio Object

Radio对象代表HTML表单中的单选按钮。
在 HTML 表单中每出现一次，一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。

Radio对象属性

1、checked 设置或返回单选按钮的状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function check(){
	document.getElementById("red").checked=true
}
function uncheck(){
	document.getElementById("red").checked=false
}
</script>
</head>
<body>

<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="green">绿色
</form>
<button type="button" onclick="check()">选择 "红色"</button>
<button type="button" onclick="uncheck()">不选择 "红色"</button>
	
</body>
</html>

效果如下：
在这里插入图片描述
2、 defaultChecked 可返回 checked 属性的默认值。如果单选按钮的默认状态是选中，则返回 true，否则返回 fasle。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("blue").defaultChecked;
	alert(x);
}
</script>
</head>
<body>

<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue" checked="checked">蓝色<br>
<input type="radio" name="colors" id="green">绿色
</form>
<button type="button" onclick="displayResult()">默认选择蓝色吗?</button>

</body>
</html>

在这里插入图片描述
3、disabled 属性可设置或返回是否禁用单选按钮。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<form>
猫:<input type="radio" name="pet" id="cats"><br>
狗:<input type="radio" name="pet" id="dogs">
</form>
<p>单击下面的按钮禁用第一个单选框。</p>
<button onclick="disableElement()">禁用单选框按钮</button>
<script>
function disableElement(){
	document.getElementById("cats").disabled=true;
}

</script>
</body>
</html>

在这里插入图片描述
4、form 属性可返回对包含该按钮的表单的引用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("red").form.id;
	alert(x);
}
</script>
</head>
<body>

<form id="form1">
你更喜欢哪种颜色？<br>
<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="green">绿色
</form>
<button type="button" onclick="displayResult()">显示所属的表单id</button>

</body>
</html>

在这里插入图片描述
5、name 属性可设置或返回单选按钮的名称。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("red").name;
	alert(x);
}
</script>
</head>
<body>

<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="green">绿色
</form>
<button type="button" onclick="displayResult()">显示红色单选框按钮名称</button>

</body>
</html>

在这里插入图片描述
6、type 属性可返回单选按钮的表单元素类型。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var x=document.getElementById("red").type;
	alert(x);
}
</script>
</head>
<body>

<form>
你更喜欢哪种颜色?<br>
<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="green">绿色
</form>
<button type="button" onclick="displayResult()">显示 input 类型</button>

</body>
</html>

在这里插入图片描述
7、value 属性可设置或返回单选按钮的 value 属性的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayResult(){
	var radios = document.getElementsByName('colors');
	for (var i = 0, length = radios.length; i < length; i++) {
		if (radios[i].checked) {
			// 弹出选中值
			alert(radios[i].value);
			// 选中后退出循环
			break;
		}
	}
}
</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>

在这里插入图片描述

pinkdown

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Radio对象

Radio ObjectRadio对象代表HTML表单中的单选按钮。在 HTML 表单中每出现一次，一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 docu...
复制链接

扫一扫