什么是checked属性
在HTML中，表单元素有一个checked属性，用于指示一个复选框或单选框是否被选中。如果checked属性被设置为true，那么该复选框或单选框就被选中了，否则就没有被选中。例如：
<input type="checkbox" name="fruit" value="apple" checked>苹果在这个例子中，复选框默认被选中。
如何使用checked属性
使用HTML
可以通过HTML设置checked属性的值来控制复选框或单选框是否默认选中。例如：
<input type="radio" name="gender" value="male" checked>男性
<input type="radio" name="gender" value="female">女性
在这个例子中，默认选中男性单选框。
使用JavaScript
也可以使用JavaScript动态设置复选框或单选框的checked属性的值。例如：
<!DOCTYPE html>
<html>
<body>
<label><input type="checkbox" id="myCheckbox"> 点击我 </label>
<script>
document.getElementById("myCheckbox").checked = true;
</script>
</body>
</html>
在这个例子中，使用JavaScript将myCheckbox复选框的checked属性设置为true，使得该复选框默认选中。
checked属性的实际应用
在实际应用中，checked属性可以用在很多地方。
表单提交
当用户提交表单时，被选中的复选框或单选框的值会被提交到服务器。例如：
<form action="example.php" method="post">
<label>
<input type="radio" name="gender" value="male" checked>男性<br>
</label>
<label>
<input type="radio" name="gender" value="female">女性<br>
</label>
<input type="submit" value="提交">
</form>
在这个例子中，选中的单选框的值会被提交到服务器。
动态生成DOM元素
JavaScript可以动态创建并添加DOM元素，并根据需要设置元素的checked属性。例如：
<div id="fruits"></div>
<button onclick=addApple()">添加苹果</button>
<script>
function addApple() {
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "fruit";
checkbox.value = "apple";
checkbox.checked = true;
var label = document.createElement("label");
label.appendChild(checkbox);
label.appendChild(document.createTextNode("苹果"));
document.getElementById("fruits").appendChild(label);
}
</script>
在这个例子中，JavaScript动态创建一个包含复选框和标签的
JavaScript判断
JavaScript可以使用checked属性判断复选框或单选框的选中状态，并根据需要执行相应的操作。例如：
<input type="checkbox" id="myCheckbox" onclick=myFunction()">
<label for="myCheckbox">点击我</label>
<script>
function myFunction() {
if (document.getElementById("myCheckbox").checked == true) {
alert("被选中！");
} else {
alert("未被选中！");
}
}
</script>
在这个例子中，当复选框被选中时，JavaScript会弹出一个提示框。
总结
checked属性是表单元素的一个属性，用于指示一个复选框或单选框是否被选中。可以通过HTML或JavaScript设置checked属性的值，进而控制复选框或单选框是否默认选中、提交表单、动态生成DOM元素和判断选中状态。在实际应用中，我们可以根据需要灵活运用checked属性。