一、checked属性简介
在HTML中，为了使用户能够对表单进行选择，我们通常会使用复选框或单选按钮来呈现选项。而checked属性则用于指定这些按钮是否被选中。当checked属性设置为checked时，该复选框或单选按钮就会在用户页面上显示为选中状态。
<input type="radio" name="example" value="option1" checked />
<input type="checkbox" name="example" value="option2" checked />
以上代码片段可以使得name为example的单选按钮和复选框默认选中。
二、htmlchecked属性取值
与checked属性不同的是，htmlchecked属性是DOM对象中的一个属性。该属性返回Boolean类型的值，指示在浏览器中该复选框或单选按钮的状态是否处于选中状态。
<script>
const example = document.querySelector("#example");
console.log(example.checked); // true 或 false
</script>
<form id="myForm">
<input type="checkbox" id="example" name="example" value="example" checked />
</form>
以上代码片段将在控制台中输出输入框的状态（选中或未选中）。
三、与htmlchecked属性相关的特性
除了checked和htmlchecked属性本身，还有许多与它们相关的属性和方法，可以帮助我们更好地掌握和操作它们，以下是其中的一些：
1、disabled属性
disabled属性用于指定是否禁用一个复选框或单选按钮。如果设置为disabled，它就不能被选中。
<input type="checkbox" name="example" value="example" disabled />
2、onclick事件
我们可以使用onclick事件来对复选框或单选按钮的选中状态进行更新。
<input type="checkbox" onclick="alert(this.checked);" />
3、defaultChecked属性
defaultChecked属性只读，用于指示一个复选框或单选按钮是否在文档被加载时已选中。如果是，则返回true；否则返回false。
<input type="checkbox" id="example" name="example" value="example" checked />
<script>
const example = document.querySelector("#example");
console.log(example.defaultChecked); // true 或 false
</script>
4、setValue()和getValue()方法
setValue()和getValue()方法可以用于设置和获取一个复选框或单选按钮的状态值。
<script>
const example = document.querySelector("#example");
example.setValue(true);
console.log(example.getValue()); // true
</script>
<form id="myForm">
<input type="checkbox" id="example" name="example" value="example" />
</form>
四、总结
通过以上阐述，我们可以发现，在开发过程中，灵活运用checked和htmlchecked属性以及其他相关属性方法，未选择的状态以及禁用的状态，可以更好地满足用户的需求。
