复选框(input type="checkbox")

复选框的基本概念

复选框(<input type="checkbox">)是HTML表单中常见的交互元素，允许用户从多个选项中选择一个或多个。与单选按钮不同，复选框支持多选操作，适合"是/否"或"多选"场景。每个复选框独立运作，选中状态互不影响。

<input type="checkbox" id="agree">
<label for="agree">我同意用户协议</label>

复选框的属性

基础属性

checked属性决定复选框的初始选中状态：

<input type="checkbox" checked> 默认选中

disabled属性禁用复选框交互：

<input type="checkbox" disabled> 不可用选项

进阶属性

indeterminate状态通过JavaScript设置，显示"部分选中"的视觉状态：

document.getElementById('indeterminateBox').indeterminate = true;

required属性在表单验证时要求至少选择一个复选框：

<input type="checkbox" required> 必选项

复选框与标签关联

推荐使用<label>元素提高可用性，两种关联方式：

<!-- 包裹式 -->
<label>
  <input type="checkbox"> 选项A
</label>

<!-- for/id关联式 -->
<input type="checkbox" id="optionB">
<label for="optionB">选项B</label>

复选框组处理

多个复选框共享相同name属性时，表单提交会包含所有选中值：

<input type="checkbox" name="color" value="red"> 红色
<input type="checkbox" name="color" value="blue"> 蓝色

服务器接收的数据格式取决于后端技术，通常为：

color=red&color=blue

样式定制技巧

基础CSS样式

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #4CAF50;
}

自定义复选框方案

完全替换原生样式需要隐藏原始元素：

<label class="custom-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  自定义样式
</label>

.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  position: relative;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

JavaScript交互控制

获取选中状态

const checkbox = document.getElementById('myCheckbox');
console.log(checkbox.checked); // true/false

事件监听

checkbox.addEventListener('change', function(e) {
  if(this.checked) {
    console.log('复选框被选中');
  } else {
    console.log('复选框取消选中');
  }
});

全选/反选实现

<input type="checkbox" id="selectAll"> 全选
<div class="checkbox-group">
  <input type="checkbox" class="item"> 选项1
  <input type="checkbox" class="item"> 选项2
  <input type="checkbox" class="item"> 选项3
</div>

document.getElementById('selectAll').addEventListener('change', function() {
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    item.checked = this.checked;
  });
});

无障碍访问要点

确保屏幕阅读器能正确识别：

<input type="checkbox" id="a11y" aria-labelledby="a11y-label">
<span id="a11y-label">无障碍复选框</span>

复杂场景使用aria-describedby：

<input type="checkbox" id="terms" aria-describedby="terms-desc">
<label for="terms">服务条款</label>
<span id="terms-desc">阅读完整条款内容...</span>

框架中的特殊处理

React示例

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <label>
      <input 
        type="checkbox"
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
      控制复选框
    </label>
  );
}

Vue示例

<template>
  <label>
    <input 
      type="checkbox"
      v-model="isChecked"
    />
    {{ isChecked ? '已选中' : '未选中' }}
  </label>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

表单提交处理

传统表单提交

<form action="/submit" method="post">
  <input type="checkbox" name="newsletter" value="subscribe">
  <label>订阅新闻</label>
  <button type="submit">提交</button>
</form>

AJAX方式处理

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const response = await fetch('/api/submit', {
    method: 'POST',
    body: formData
  });
  // 处理响应...
});

特殊应用场景

树形菜单实现

<ul class="tree">
  <li>
    <label>
      <input type="checkbox"> 父节点
    </label>
    <ul>
      <li><input type="checkbox"> 子节点1</li>
      <li><input type="checkbox"> 子节点2</li>
    </ul>
  </li>
</ul>

批量操作界面

<div class="batch-actions">
  <button id="batch-delete">删除选中</button>
  <div class="item-list">
    <input type="checkbox" class="batch-item" data-id="1">
    <input type="checkbox" class="batch-item" data-id="2">
  </div>
</div>

<script>
document.getElementById('batch-delete').addEventListener('click', () => {
  const selected = Array.from(document.querySelectorAll('.batch-item:checked'))
    .map(el => el.dataset.id);
  console.log('待删除ID:', selected);
});
</script>

性能优化建议

大量复选框渲染时考虑虚拟滚动：

// 伪代码示例
function renderVisibleCheckboxes() {
  const visibleItems = allItems.slice(scrollPosition, scrollPosition + visibleCount);
  return visibleItems.map(item => (
    <input type="checkbox" key={item.id} id={`item-${item.id}`}>
  ));
}

浏览器兼容性注意

旧版IE需要polyfill处理indeterminate属性：

// IE9+支持检测
if(!('indeterminate' in document.createElement('input'))) {
  // 降级方案
}

移动端适配技巧

增加点击区域提高触摸体验：

input[type="checkbox"] + label {
  padding: 12px;
  display: inline-block;
}

防止移动端双击缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">