HTML checked 属性

HTML checked 语法

在 HTML 中，checked 属性用于表示 input 元素（主要用于单选按钮和复选框）在页面加载时是否应被选中。

只有以下类型的 input 元素支持 checked 属性：

语法：

<input type="radio" checked>
<input type="checkbox" checked>

说明：

checked 是一个布尔属性。在 HTML5 标准中，下面 2 种写法是等价的：

<!--写法1：推荐-->
<input type="text" checked>

<!--写法2-->
<input type="text" checked="checked">

什么是布尔属性？

布尔属性（Boolean Attributes），是一种特殊的 HTML 属性。它们的存在本身就表示一个 true（真）值，而它们的缺失则表示 false（假）值。这些属性不需要显式赋值（如 true 或 false），只要属性名存在即可。

就拿 required 属性来说：

<input type="text" required>：表示这个文本输入框是 “必填” 的。
<input type="text">：表示这个文本输入框是 “非必填” 的。

对于布尔属性来说，虽然下面 2 种写法是等价的。但 HTML5 更加推荐写法 1（即只写属性名、不带任何值）

<!--写法1：推荐-->
<input type="text" required>

<!--写法2-->
<input type="text" required="required">

注意，下面这种写法是错误的。

<!--错误写法-->
<input type="text" required="true">

其中，常见的布尔属性有：

autofocus：页面加载时，元素自动获得焦点。
hidden：是否隐藏元素。
checked：是否选中，用于单选按钮和复选框。
disabled：是否禁用。
readonly：是否只读。
required：是否必填，用于 input、textarea 和 select 元素。
selected：是否选中，用于 option 元素。
multiple：是允许多选，用于 input 和 select 元素。
novalidate：是否跳过内置的验证功能，用于 form 元素。
autoplay：是否自动播放，用于 audio 和 video 元素。
loop：是否循环播放，用于 audio 和 video 元素。

HTML checked 摘要

适用元素	input（只限于单选按钮和复选框）
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML checked 示例

接下来，我们通过一个简单的例子来讲解一下 HTML checked 属性是如何使用的。

示例：checked 属性的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form action="/submit" method="post">
        <p>我喜欢的颜色是：</p>
        <p>
            <label>
                <input type="radio" name="color" value="red">
                红色
            </label>
            <label>
                <input type="radio" name="color" value="blue" checked>
                蓝色
            </label>
            <label>
                <input type="radio" name="color" value="green">
                绿色
            </label>
        </p>

        <p>我喜欢的编程语言是：</p>
        <p>
            <label>
                <input type="checkbox" name="language" value="python" checked>
                Python
            </label>
            <label>
                <input type="checkbox" name="language" value="cpp">
                C++
            </label>
            <label>
                <input type="checkbox" name="language" value="javascript" checked>
                JavaScript
            </label>
        </p>

        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
</html>

页面效果如下图所示。

HTML checked属性示例

分析：

checked 属性可以用于单选按钮和复选框。此外，我们使用 label 标签包裹了 input 元素。这样不仅能显示说明文字，还能让用户点击文字时也能选中对应的选项（隐式关联），从而提升用户体验。