在HTML表单开发中，设置单选按钮和复选框的默认选中状态是常见需求，核心是通过元素的checked属性来实现，不同元素的使用规则略有差异，下面分别展开说明。
单选按钮默认选中设置
单选按钮使用<input type="radio">标签创建，同一组单选按钮需要设置相同的name属性值，才能保证互斥选择的效果。要设置默认选中状态，只需要在目标单选按钮的标签中添加checked属性即可。
checked属性是布尔属性，只要存在于标签中，无论属性值设置为checked、空值还是其他合法值，都会让该单选按钮处于默认选中状态。不过规范写法通常是直接写checked或者checked="checked"。
<!-- 性别选择单选组，默认选中男性 --> <form> <p>请选择性别：</p> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 <input type="radio" name="gender" value="other"> 其他 </form>
复选框默认选中设置
复选框使用<input type="checkbox">标签创建，每个复选框可以独立选择，设置默认选中的方式和单选按钮一致，同样是通过添加checked属性实现。
如果一组复选框需要多个默认选中，只需要给每个需要选中的元素都添加checked属性即可，复选框之间不存在互斥关系。
<!-- 兴趣爱好复选组，默认选中阅读和运动 --> <form> <p>请选择兴趣爱好：</p> <input type="checkbox" name="hobby" value="read" checked> 阅读 <input type="checkbox" name="hobby" value="sport" checked> 运动 <input type="checkbox" name="hobby" value="music"> 音乐 <input type="checkbox" name="hobby" value="travel"> 旅行 </form>
注意事项
- 同一组单选按钮只能设置一个checked属性，否则会出现多个选中项，不符合单选的互斥逻辑。
- 如果通过JavaScript动态修改选中状态，可以操作元素的checked属性，将其赋值为true或false即可切换状态。
- 在HTML5规范中，布尔属性可以省略属性值，直接写checked即可生效，不需要写成checked="checked"，两种写法都符合规范。
动态设置选中状态示例
如果需要在页面加载后根据条件动态设置选中状态，可以通过JavaScript实现，以下是示例代码：
// 页面加载完成后执行
window.onload = function() {
// 获取value为female的单选按钮
var femaleRadio = document.querySelector('input[type="radio"][value="female"]');
// 动态设置为选中状态
femaleRadio.checked = true;
// 获取value为music的复选框
var musicCheckbox = document.querySelector('input[type="checkbox"][value="music"]');
// 动态设置为选中状态
musicCheckbox.checked = true;
};
HTML_formradio_checkedcheckbox_checkedform_default_state修改时间：2026-07-03 21:21:11