checked属性用于设置或获取表单元素（如单选按钮、复选框）的选中状态。在HTML中，checked 是一个布尔属性，当元素被选中时，该属性会被添加到元素中，表示该选项默认处于选中状态。1. 单选按钮（radio）对于单选按钮，checked 属性用于指定默认选中的选项。在一个组中，只能有一个单选按钮被选中。示例：

时间：2026-05-22 23:45:48 379浏览 收藏

HTML中的`checked`属性看似简单，实则暗藏关键分层逻辑：它仅负责页面首次加载时的默认选中状态，而运行时的实时选中行为由JavaScript的`element.checked`属性（DOM property）控制，CSS的`:checked`伪类也只响应这一动态状态；混淆HTML属性、DOM属性与CSS伪类三者的关系，极易导致样式失效、事件监听失灵或服务端状态同步错误——理解这一“初始态与运行态分离”的本质，是前端表单开发避坑的关键。

HTML checked 属性控制默认选中状态

它只影响页面首次加载时的初始状态，不是运行时的实时状态。一旦页面渲染完成，checked 属性就“完成任务”了；后续勾选/取消勾选操作改变的是元素的 checked 属性值（即 DOM property），而不是 HTML 中写的那个 checked 属性（即 HTML attribute）。

• checked 是布尔属性：写上即表示 true，不写即 false；不需要写 checked="true" 或 checked="checked"（后者仅 XHTML 强制要求）
• 对 <input type="checkbox"> 和 <input type="radio"> 有效，其他类型（如 text、button）忽略该属性
• 多个 radio 同名（name 相同）时，只有第一个带 checked 的会被默认选中；但多个 checkbox 可各自独立设置 checked
• 如果服务端模板（如 ASP.NET Web Forms、Razor）动态输出 HTML，注意不要让逻辑错误导致多个同名 radio 都带 checked —— 浏览器会按文档顺序取最后一个生效，行为不可靠

JavaScript 修改选中状态不能只改 setAttribute

用 element.setAttribute('checked', 'checked') 或 removeAttribute('checked') 不会真正改变控件的勾选视觉和行为，尤其在 Chrome/Firefox 中可能完全无效。这是因为 DOM property（element.checked）和 HTML attribute（element.getAttribute('checked')）是两个不同东西。

• 正确做法是直接读写 element.checked 这个 JS 属性：box.checked = true 或 box.checked = false
• 如果必须用属性操作（比如 SSR 渲染后初始化），优先用 element.toggleAttribute('checked', bool)，但依旧推荐直接赋值 checked property
• 监听变化要用 change 事件，不是 click —— 用户用空格键切换 checkbox 也会触发 change，但不触发 click

:checked 伪类只能响应 DOM property 变化

CSS 的 :checked 看的是当前元素是否被用户或脚本通过 element.checked = true 设为选中，而不是看 HTML 里有没有写 checked 属性。也就是说，它反映的是实时状态，不是初始标记。

• input[type=checkbox]:checked + label { color: red; } 这类样式，只有在用户点击或 JS 设置 .checked = true 后才生效
• 如果你用 JS 清除了 checked 属性但没改 element.checked，:checked 依然匹配
• 反过来，删掉 HTML 中的 checked 属性，但保留 element.checked = true，:checked 仍起作用
• 注意 Safari 对 :checked ~ .sibling（通用兄弟选择器）的支持比 +（相邻兄弟）略差，复杂布局建议测试

ASP.NET Web Forms 中 CheckBox.Checked 和 HTML checked 容易混淆

服务器控件（如 asp:CheckBox）的 Checked 属性是服务端状态，它最终会决定是否在渲染出的 HTML 中写入 checked 属性 —— 但这个映射只发生在页面生成阶段。回发（postback）后，控件的 Checked 值由请求体中的 __EVENTTARGET 和表单字段推导，不是靠解析 HTML。

• 不要在 Page_Load 里靠 Request.Form["ctl00_ContentPlaceHolder1_CheckBox1"] != null 判断，应直接读 CheckBox1.Checked
• 如果禁用了 ViewState，又没在每次 Page_Load 里重新赋值 CheckBox1.Checked，那么用户勾选后回发，服务端看到的仍是初始值
• 前端 JS 改了 document.getElementById("...").checked = true，但没触发表单提交，服务端完全感知不到 —— 这是常见调试盲区

今天关于《checked属性用于设置或获取表单元素（如单选按钮、复选框）的选中状态。在HTML中，checked 是一个布尔属性，当元素被选中时，该属性会被添加到元素中，表示该选项默认处于选中状态。1. 单选按钮（radio）对于单选按钮，checked 属性用于指定默认选中的选项。在一个组中，只能有一个单选按钮被选中。示例：<input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女在这个例子中，"男" 单选按钮默认被选中。2. 复选框（checkbox）对于复选框，checked 属性用于指定默认是否被选中。示例：<input type="checkbox" name="subscribe" value="yes" checked> 订阅邮件这个复选框默认是选中的状态。3. JavaScript 中使用 checked在 JavaScript 中，可以通过 element.checked 来获取或设置元素的选中状态。示例： // 获取元素 var checkbox = document.getElementById("myCheckbox"); // 设置为选中状态 checkbox.checked = true; // 获取》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！