Skip to content

复选框 Checkbox

复选框是表单中用于多选的控件,允许用户选择多个选项。

基础用法

单个复选框

html
<label class="glass-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  选择此项
</label>

多个复选框

html
<div class="checkbox-group">
  <label class="glass-checkbox">
    <input type="checkbox" value="option1">
    <span class="checkmark"></span>
    选项一
  </label>
  <label class="glass-checkbox">
    <input type="checkbox" value="option2">
    <span class="checkmark"></span>
    选项二
  </label>
  <label class="glass-checkbox">
    <input type="checkbox" value="option3">
    <span class="checkmark"></span>
    选项三
  </label>
</div>

基础复选框

html
<label class="glass-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  选项一
</label>

预览效果:

复选框状态

选中状态

html
<label class="glass-checkbox">
  <input type="checkbox" checked>
  <span class="checkmark"></span>
  已选中
</label>

预览效果:

禁用状态

html
<label class="glass-checkbox">
  <input type="checkbox" disabled>
  <span class="checkmark"></span>
  禁用未选中
</label>

<label class="glass-checkbox">
  <input type="checkbox" checked disabled>
  <span class="checkmark"></span>
  禁用已选中
</label>

预览效果:

复选框组

html
<div class="checkbox-group">
  <label class="glass-checkbox">
    <input type="checkbox" checked>
    <span class="checkmark"></span>
    选项一
  </label>
  <label class="glass-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    选项二
  </label>
  <label class="glass-checkbox">
    <input type="checkbox" checked>
    <span class="checkmark"></span>
    选项三
  </label>
</div>

预览效果:

不确定状态

html
<label class="glass-checkbox">
  <input type="checkbox" class="indeterminate">
  <span class="checkmark"></span>
  不确定状态
</label>

复选框尺寸

html
<!-- 小尺寸 -->
<label class="glass-checkbox small">
  <input type="checkbox">
  <span class="checkmark"></span>
  小尺寸
</label>

<!-- 默认尺寸 -->
<label class="glass-checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
  默认尺寸
</label>

<!-- 大尺寸 -->
<label class="glass-checkbox large">
  <input type="checkbox">
  <span class="checkmark"></span>
  大尺寸
</label>

CSS 类名

基础类名

  • .glass-checkbox - 基础复选框样式
  • .checkmark - 复选框标记
  • .checkbox-group - 复选框组容器

修饰类名

尺寸修饰符

  • .small - 小尺寸
  • .large - 大尺寸

状态修饰符

  • :checked - 选中状态
  • :disabled - 禁用状态
  • .indeterminate - 不确定状态

JavaScript 增强

全选功能

javascript
function initSelectAll(selectAllCheckbox, checkboxes) {
  selectAllCheckbox.addEventListener('change', function() {
    checkboxes.forEach(checkbox => {
      checkbox.checked = this.checked;
    });
  });
  
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const allChecked = Array.from(checkboxes).every(cb => cb.checked);
      const someChecked = Array.from(checkboxes).some(cb => cb.checked);
      
      selectAllCheckbox.checked = allChecked;
      selectAllCheckbox.indeterminate = someChecked && !allChecked;
    });
  });
}

// 使用示例
const selectAll = document.querySelector('#select-all');
const items = document.querySelectorAll('.item-checkbox');
initSelectAll(selectAll, items);

不确定状态

javascript
// 设置不确定状态
document.querySelectorAll('.indeterminate').forEach(checkbox => {
  checkbox.indeterminate = true;
});

应用场景

全选列表

html
<div class="select-list">
  <label class="glass-checkbox">
    <input type="checkbox" id="select-all">
    <span class="checkmark"></span>
    全选
  </label>
  
  <div class="item-list">
    <label class="glass-checkbox">
      <input type="checkbox" class="item-checkbox" value="item1">
      <span class="checkmark"></span>
      项目 1
    </label>
    <label class="glass-checkbox">
      <input type="checkbox" class="item-checkbox" value="item2">
      <span class="checkmark"></span>
      项目 2
    </label>
    <label class="glass-checkbox">
      <input type="checkbox" class="item-checkbox" value="item3">
      <span class="checkmark"></span>
      项目 3
    </label>
  </div>
</div>

设置选项

html
<form class="settings-form">
  <div class="setting-group">
    <h4>通知设置</h4>
    <label class="glass-checkbox">
      <input type="checkbox" name="notifications" value="email">
      <span class="checkmark"></span>
      邮件通知
    </label>
    <label class="glass-checkbox">
      <input type="checkbox" name="notifications" value="sms">
      <span class="checkmark"></span>
      短信通知
    </label>
    <label class="glass-checkbox">
      <input type="checkbox" name="notifications" value="push">
      <span class="checkmark"></span>
      推送通知
    </label>
  </div>
</form>

协议同意

Released under the MIT License.