编辑“︁HTML复选框”︁（章节）

= HTML复选框 =

'''HTML复选框'''（Checkbox）是HTML表单中的一种输入控件，允许用户从多个选项中选择一个或多个选项。复选框通常用于需要多选的场景，例如选择兴趣爱好、产品功能或同意条款等。

== 基本语法 ==

HTML复选框使用<code><nowiki><input type="checkbox"></nowiki></code>元素定义，其基本语法如下：

<syntaxhighlight lang="html">
<input type="checkbox" id="option1" name="option1" value="value1">
<label for="option1">选项1</label>
</syntaxhighlight>

其中：
* '''type="checkbox"'''：指定输入类型为复选框。
* '''id'''：为复选框提供唯一标识符，通常与<code><label></code>的<code>for</code>属性配合使用。
* '''name'''：定义复选框的名称，用于表单提交时识别数据。
* '''value'''：指定复选框被选中时提交的值。

=== 示例：基本复选框 ===
<syntaxhighlight lang="html">
<form>
  <input type="checkbox" id="fruit1" name="fruits" value="apple">
  <label for="fruit1">苹果</label><br>
  <input type="checkbox" id="fruit2" name="fruits" value="banana">
  <label for="fruit2">香蕉</label><br>
  <input type="checkbox" id="fruit3" name="fruits" value="orange">
  <label for="fruit3">橙子</label>
</form>
</syntaxhighlight>

输出效果：
* [ ] 苹果
* [ ] 香蕉
* [ ] 橙子

== 属性详解 ==

HTML复选框支持多个属性来控制其行为和外观：

=== 常用属性 ===
* '''checked'''：布尔属性，设置复选框默认被选中。
  <syntaxhighlight lang="html">
  <input type="checkbox" id="agree" name="agree" checked>
  <label for="agree">我同意条款</label>
  </syntaxhighlight>

* '''disabled'''：禁用复选框，用户无法交互。
  <syntaxhighlight lang="html">
  <input type="checkbox" id="readonly" name="readonly" disabled>
  <label for="readonly">只读选项</label>
  </syntaxhighlight>

* '''required'''：要求至少选择一个复选框（需要配合表单验证使用）。

=== 分组复选框 ===
多个复选框可以共享相同的<code>name</code>属性，形成一组选项。提交表单时，所有被选中的复选框值会以数组形式发送。

<syntaxhighlight lang="html">
<form>
  <p>选择你喜欢的颜色：</p>
  <input type="checkbox" id="color1" name="colors" value="red">
  <label for="color1">红色</label><br>
  <input type="checkbox" id="color2" name="colors" value="green">
  <label for="color2">绿色</label><br>
  <input type="checkbox" id="color3" name="colors" value="blue">
  <label for="color3">蓝色</label>
</form>
</syntaxhighlight>

== 与单选框的区别 ==

<mermaid>
flowchart TD
    A[选择控件] --> B[复选框]
    A --> C[单选框]
    B --> D[允许多选]
    C --> E[只能单选]
</mermaid>

主要区别：
* 复选框（Checkbox）：允许多选
* 单选框（Radio）：同一组内只能选择一个

== 表单处理 ==

当表单包含复选框时，服务器接收的数据取决于复选框的状态：

* 选中的复选框：发送<code>name=value</code>对
* 未选中的复选框：不会发送任何数据

=== PHP处理示例 ===
<syntaxhighlight lang="php">
// 处理多选复选框
if(isset($_POST['colors'])) {
    $selectedColors = $_POST['colors']; // 这是一个数组
    foreach($selectedColors as $color) {
        echo "你选择了: " . htmlspecialchars($color) . "<br>";
    }
}
</syntaxhighlight>

== 高级用法 ==

=== 使用CSS样式化 ===
复选框可以通过CSS进行样式化，通常需要隐藏原生控件并使用伪元素创建自定义样式：

<syntaxhighlight lang="css">
/* 隐藏原生复选框 */
input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

/* 创建自定义复选框 */
input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    margin-right: 8px;
    vertical-align: middle;
}

/* 选中状态样式 */
input[type="checkbox"]:checked + label::before {
    background-color: #2196F3;
    border-color: #2196F3;
}
</syntaxhighlight>

=== JavaScript交互 ===
可以使用JavaScript动态控制复选框：

<syntaxhighlight lang="javascript">
// 获取复选框状态
document.getElementById('myCheckbox').addEventListener('change', function() {
    if(this.checked) {
        console.log('复选框被选中');
    } else {
        console.log('复选框未选中');
    }
});

// 全选/全不选功能
function toggleAll(source) {
    let checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for(let checkbox of checkboxes) {
        checkbox.checked = source.checked;
    }
}
</syntaxhighlight>

== 实际应用案例 ==

=== 购物车商品选择 ===
<syntaxhighlight lang="html">
<form action="/checkout" method="post">
  <h3>选择要购买的商品：</h3>
  <input type="checkbox" id="item1" name="items" value="1001">
  <label for="item1">笔记本电脑 - ¥5999</label><br>
  
  <input type="checkbox" id="item2" name="items" value="1002">
  <label for="item2">智能手机 - ¥2999</label><br>
  
  <input type="checkbox" id="item3" name="items" value="1003">
  <label for="item3">无线耳机 - ¥399</label><br>
  
  <button type="submit">结算</button>
</form>
</syntaxhighlight>

=== 问卷调查 ===
<syntaxhighlight lang="html">
<form>
  <fieldset>
    <legend>你使用哪些社交媒体？（可多选）</legend>
    <input type="checkbox" id="social1" name="social" value="facebook">
    <label for="social1">Facebook</label><br>
    
    <input type="checkbox" id="social2" name="social" value="twitter">
    <label for="social2">Twitter</label><br>
    
    <input type="checkbox" id="social3" name="social" value="instagram">
    <label for="social3">Instagram</label>
  </fieldset>
</form>
</syntaxhighlight>

== 最佳实践 ==

1. 始终为复选框添加关联的<code><label></code>元素，提高可访问性
2. 对相关复选框进行逻辑分组，使用<code><fieldset></code>和<code><legend></code>
3. 对于重要选项（如条款同意），考虑使用<code>required</code>属性
4. 在移动设备上，确保复选框和标签有足够的点击区域
5. 提供清晰的视觉反馈，特别是自定义样式的复选框

== 常见问题 ==

=== 如何获取未选中复选框的值？ ===
默认情况下，未选中的复选框不会提交数据。如果需要检测未选中状态，可以使用：
* 隐藏字段设置默认值
* JavaScript在提交前处理所有复选框状态

=== 复选框和开关（Toggle）有什么区别？ ===
开关是复选框的视觉变体，通常用于表示"开/关"状态，而复选框更适合多选场景。

=== 如何垂直对齐复选框和标签？ ===
使用CSS的<code>vertical-align: middle</code>可以解决大多数对齐问题：

<syntaxhighlight lang="css">
input[type="checkbox"] {
    vertical-align: middle;
    margin-right: 5px;
}
</syntaxhighlight>

== 总结 ==

HTML复选框是表单中不可或缺的元素，适用于需要多选的场景。通过合理使用各种属性和结合CSS、JavaScript，可以创建功能丰富、用户友好的多选界面。掌握复选框的使用技巧，能够显著提升表单的交互体验和数据收集效率。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]