可通过checked属性、JavaScript、setAttribute、removeAttribute及CSS伪类五种方式控制复选框或单选框的勾选状态：一、HTML中用checked布尔属性设默认选中；二、JS通过element.checked=true/false动态设置；三、setAttribute("checked", "")强制添加；四、removeAttribute("checked")或checked=false取消勾选；五、:checked伪类实现样式响应。
如果您在HTML5中需要控制复选框（checkbox）或单选框（radio）的默认勾选状态，可通过属性设置或脚本操作实现。以下是几种常用且互不依赖的实现方式：
一、使用checked属性设置默认勾选
在HTML5中，checked 是布尔属性，用于声明复选框或单选框初始时处于选中状态。该属性无需赋值，仅存在即生效。
1、为复选框添加 checked 属性：。
2、为单选框组中的某一项添加 checked 属性： 男。
立即学习“前端免费学习笔记（深入）”；
3、注意：同一组单选框（name相同）中，**只能有一个**具有 checked 属性，否则行为未定义。
二、通过JavaScript动态设置勾选状态
利用DOM API可运行时修改元素的 checked 属性值，适用于响应用户操作或条件逻辑判断后的状态切换。
1、获取目标复选框元素：const cb = document.getElementById("myCheckbox");。
2、设置其勾选状态为真：cb.checked = true;。
3、设置其勾选状态为假：cb.checked = false;。
4、对单选框组，需遍历同名元素并单独设置：document.querySelectorAll('input[name="theme"]').forEach(r => r.checked = r.value === "dark");。
三、使用setAttribute方法强制添加checked属性
setAttribute可用于在已渲染的DOM上显式插入 checked 属性，尤其适用于动态生成的表单控件。
1、获取目标元素：const radio = document.querySelector('input[value="blue"]');。
2、调用 setAttribute("checked", "")：radio.setAttribute("checked", "");。
3、注意：仅调用 setAttribute("checked", "checked") 在HTML5中也有效，但空字符串更符合规范。
四、移除勾选状态的两种等效方式
取消勾选可通过移除属性或设置布尔值实现，二者效果一致，但底层机制不同。
1、使用 removeAttribute("checked") 移除属性节点：element.removeAttribute("checked");。
2、直接将 checked 属性设为 false：element.checked = false;。
3、注意：仅修改HTML字符串（如 innerHTML）不会触发DOM状态更新，必须操作实际元素对象。
五、通过CSS伪类检测勾选状态并样式化
虽不改变勾选行为，但可借助 :checked 伪类实现视觉反馈，提升交互体验。
1、为已勾选的复选框后紧邻的标签添加样式：input[type="checkbox"]:checked + label { color: #007bff; }。
2、隐藏原生复选框并用伪元素替代：input[type="checkbox"] { display: none; } input[type="checkbox"] + label::before { content: "☐"; } input[type="checkbox"]:checked + label::before { content: "☑"; }。
3、确保label使用 for 属性或包裹input，以维持可访问性。
