在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

语法：

<input type="checkbox" name="组名" value="取值" />

说明：

name属性表示复选框所在的组名，而value表示复选框的取值。跟单选框一样，这两个属性也必须要设置。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果"/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜"/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>

浏览器预览效果如下图所示。

分析：

复选框中的name跟单选框中的name都是用来设置“组名”的，表示该选项位于哪一组中。

两者都设置name属性，为什么单选框只能选中一项，而复选框可以选择多项呢？这是因为浏览器会自动识别这是“单选框组”还是“复选框组”（说白了就是根据type属性取值来识别）。如果是单选框组，就只能选择一项；如果是复选框组，就可以选择多项。

想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。这一点跟单选框是一样的。

举例：checked属性

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form method="post">
        你喜欢的水果：<br/>
        <input type="checkbox" name="fruit" value="苹果" checked/>苹果
        <input type="checkbox" name="fruit" value="香蕉"/>香蕉
        <input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
        <input type="checkbox" name="fruit" value="李子"/>李子
    </form>
</body>
</html>

浏览器预览效果如下图所示。

单选框与复选框就像好基友关系，很多地方都是相似的。我们多对比理解一下，这样更能加深印象。