📌  相关文章
📜  HTML | DOM Input Radio defaultChecked 属性(1)

📅  最后修改于: 2023-12-03 15:31:12.036000             🧑  作者: Mango

HTML | DOM Input Radio defaultChecked 属性

简介

defaultChecked 属性是 HTML DOM 中 input type 为 radio 的元素的一个属性，用于设置元素是否默认选中状态。

该属性仅在文档被加载时设置一次，设置之后如果需要改变元素选中状态需要使用 checked 属性。

语法
// 获取元素属性值
var radioDefaultChecked = element.defaultChecked;

// 设置元素属性值
element.defaultChecked = true|false;
  • element：必选，表示 input 元素对象；
  • radioDefaultChecked：表示 input 元素 defaultChecked 属性值；
  • true：表示选中状态；
  • false：表示未选中状态。
示例
获取属性值
<!DOCTYPE html>
<html>
<head>
	<title>获取 defaultChecked 属性值</title>
</head>
<body>
	<input type="radio" id="radio1" name="radio-group" value="radio1" defaultChecked="true">radio1
	<input type="radio" id="radio2" name="radio-group" value="radio2">radio2
	<input type="radio" id="radio3" name="radio-group" value="radio3">radio3

	<button onclick="getChecked()">获取选中状态</button>

	<p id="result"></p>

	<script>
		function getChecked() {
			var radio1 = document.getElementById("radio1");
			var result = document.getElementById("result");

			result.innerHTML = "默认选中状态：" + radio1.defaultChecked;
		}
	</script>
</body>
</html>

代码解释：

上面的代码创建了三个 input type 为 radio 的元素，其中 radio1 设置了 defaultChecked 属性为 true，表示默认选中状态。

getChecked() 函数通过获取 radio1 元素对象的 defaultChecked 属性值来判断元素是否为默认选中状态，并将结果显示在页面上。

设置属性值
<!DOCTYPE html>
<html>
<head>
	<title>设置 defaultChecked 属性值</title>
</head>
<body>
	<input type="radio" id="radio1" name="radio-group" value="radio1">radio1
	<input type="radio" id="radio2" name="radio-group" value="radio2">radio2
	<input type="radio" id="radio3" name="radio-group" value="radio3">radio3

	<button onclick="setChecked()">设置选中状态为默认</button>

	<script>
		function setChecked() {
			var radio1 = document.getElementById("radio1");

			radio1.defaultChecked = true;
		}
	</script>
</body>
</html>

代码解释：

上面的代码创建了三个 input type 为 radio 的元素。

setChecked() 函数通过获取 radio1 元素对象并设置其 defaultChecked 属性值为 true，将其设置为默认选中状态。

注意事项
  1. defaultChecked 属性只在初始化元素时设置一次，如果需要改变元素的选中状态应使用 checked 属性；
  2. 在设置 defaultChecked 属性时应该注意元素所在表单的条件规则，因为如果多个表单元素有相同的 name 属性值，它们就会成为一个表单组，并且每个组只能选择一个元素。