HTML 复选框

Begindev 编辑部 March 25, 2026

复选框（checkbox）可以让用户从预定义的列表中选择多个选项。

与限制用户只能选择一个选项的单选按钮不同，复选框提供了选择任意组合选项的灵活性。

1. 理解 `<input type="checkbox">` 元素

HTML 中复选框的基础在于 <input> 元素，具体来说是当其 type 属性设置为 "checkbox" 时。每个复选框代表一组选择中的一个单独选项。

1.1 基本语法

创建复选框的基本语法如下：

<input type="checkbox" id="option1" name="options" value="value1">
<label for="option1">选项 1</label><br>

<input type="checkbox" id="option2" name="options" value="value2">
<label for="option2">选项 2</label><br>

<input type="checkbox" id="option3" name="options" value="value3">
<label for="option3">选项 3</label>

让我们分解每个部分：

<input type="checkbox">：声明一个类型为“checkbox”的输入元素。
id="option1"：id 属性为复选框提供唯一的标识符。这对于将复选框与其对应的 <label> 元素链接至关重要。
name="options"：name 属性将相关的复选框组合在一起。当表单提交时，所有具有相同 name 的被选中的复选框将作为值数组发送。这就是服务器端脚本识别用户做出的所有选择的方式。
value="value1"：value 属性指定了如果复选框被选中，将提交给服务器的值。这个值不会显示给用户；它用于数据处理。
<label for="option1">选项 1</label>：<label> 元素为复选框提供用户友好的描述。for 属性必须与对应 <input> 元素的 id 匹配，以创建显式关联。点击标签将切换复选框，提高无障碍性和可用性。
<br>：<br> 标签插入换行符，将每个复选框和标签放在新的一行。

1.2 关键属性详解

type：指定输入元素的类型，在本例中为 "checkbox"。
id：复选框的唯一标识符，用于将其与标签链接。
name：将相关的复选框组合在一起，允许多个选择作为数组提交。
value：如果复选框被选中，将提交给服务器的值。
checked：一个布尔属性，指示页面加载时复选框是否初始被选中。

2. `checked` 属性

checked 属性允许你在表单初始加载时预选一个复选框。这对于提供默认选项或记住用户偏好很有用。

<input type="checkbox" id="agree" name="agreement" value="yes" checked>
<label for="agree">我同意条款和条件</label>

在这个例子中，页面加载时，“我同意条款和条件”复选框将被预选。

3. 无障碍性考量

始终使用 for 和 id 属性将 <label> 元素与每个复选框关联。这为用户提供了更大的可点击区域，使选择复选框更容易，尤其是在触摸设备上。它还改善了残障用户（如使用屏幕阅读器的用户）的无障碍性。

4. 实战示例与演示

让我们探索一些在 HTML 表单中使用复选框的实际示例。

4.1 示例 1：选择爱好

此示例演示如何使用复选框允许用户选择他们的爱好。

<form>
  <p>选择你的爱好：</p>
  <input type="checkbox" id="reading" name="hobbies" value="reading">
  <label for="reading">阅读</label><br>
  
  <input type="checkbox" id="sports" name="hobbies" value="sports">
  <label for="sports">运动</label><br>
  
  <input type="checkbox" id="music" name="hobbies" value="music">
  <label for="music">音乐</label><br>
  
  <input type="checkbox" id="travel" name="hobbies" value="travel" checked>
  <label for="travel">旅行</label><br>
</form>

解析：

所有复选框的 name 属性都设置为 "hobbies"，将它们组合在一起。
value 属性指定每个复选框对应的爱好。
使用 checked 属性预选了“旅行”复选框。

4.2 示例 2：订购披萨配料

此示例演示如何使用复选框允许用户选择多种披萨配料。

<form>
  <p>选择你的披萨配料：</p>
  <input type="checkbox" id="pepperoni" name="toppings" value="pepperoni">
  <label for="pepperoni">意大利辣香肠</label><br>
  
  <input type="checkbox" id="mushrooms" name="toppings" value="mushrooms">
  <label for="mushrooms">蘑菇</label><br>
  
  <input type="checkbox" id="onions" name="toppings" value="onions">
  <label for="onions">洋葱</label><br>
  
  <input type="checkbox" id="olives" name="toppings" value="olives">
  <label for="olives">橄榄</label>
</form>

4.3 示例 3：订阅多个通讯列表

<form>
  <p>订阅我们的新闻简报：</p>
  <input type="checkbox" id="tech" name="newsletters" value="tech">
  <label for="tech">科技简报</label><br>
  
  <input type="checkbox" id="sports" name="newsletters" value="sports">
  <label for="sports">体育简报</label><br>
  
  <input type="checkbox" id="fashion" name="newsletters" value="fashion">
  <label for="fashion">时尚简报</label><br>
</form>

5. 提交复选框数据

当包含复选框的表单被提交时，服务器将接收具有相同 name 属性的所有被选中（checked）复选框的值。

例如，如果用户在上面的“爱好”示例中选择了“阅读”和“音乐”，服务器将收到以下数据（假设表单使用 GET 方法）：
?hobbies=reading&hobbies=music

如果表单使用 POST 方法，数据将在请求体中。

1. 理解 <input type="checkbox"> 元素