Checkbox 复选框

复选框组件，用于选择一个或多个选项。

基础用法

简单的复选框。

<div id="demo-checkbox"></div>

<script>
const checkbox = new SaCheckbox('#demo-checkbox', {
  label: '选项一',
  value: 'option1',
  checked: false,
  onChange: (checked, value) => {
    console.log('选中:', checked, value);
  }
});

SA.init('body');
</script>

加载 SanoUI 组件中...

多选框组

创建多个复选框。

<div id="demo-checkbox-group"></div>

<script>
const container = document.getElementById('demo-checkbox-group');
['选项一', '选项二', '选项三'].forEach((label, index) => {
  const checkboxEl = document.createElement('div');
  checkboxEl.style.marginBottom = '12px';
  container.appendChild(checkboxEl);
  new SaCheckbox(checkboxEl, {
    label: label,
    value: `option${index + 1}`,
    checked: index === 0,
    onChange: (checked, value) => {
      console.log('选中:', checked, value);
    }
  });
});

SA.init('body');
</script>

加载 SanoUI 组件中...

半选状态

通过 indeterminate: true 设置半选状态。

<div id="demo-checkbox-indeterminate"></div>

<script>
const checkbox = new SaCheckbox('#demo-checkbox-indeterminate', {
  label: '半选状态',
  value: 'indeterminate',
  indeterminate: true
});

SA.init('body');
</script>

加载 SanoUI 组件中...

自动初始化

使用 SA.init() 可以自动初始化所有带有 class="sa-checkbox" 的复选框组件。

<div>
  <label class="sa-checkbox" data-checkbox="true" data-label="选项一" data-value="option1"></label>
</div>
<div style="margin-top: 12px;">
  <label class="sa-checkbox" data-checkbox="true" data-label="选项二" data-value="option2" data-checked="true"></label>
</div>
<div style="margin-top: 12px;">
  <label class="sa-checkbox" data-checkbox="true" data-label="选项三" data-value="option3"></label>
</div>

<script>
// 使用 SA.init() 自动初始化所有组件
const page = SA.init('body');

// 复选框组件已自动初始化，所有带有 class="sa-checkbox" 的元素都会被处理

// 复选框组件通常不需要手动初始化，直接使用 HTML 类名即可
</script>

加载 SanoUI 组件中...

API

构造函数

new SaCheckbox(container, config)

参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
config	配置选项	SaCheckboxOptions	{}

配置选项

参数	说明	类型	默认值
label	标签文本	string	''
value	选项值	string | number	-
checked	是否选中	boolean	false
indeterminate	是否半选状态	boolean	false
disabled	是否禁用	boolean	false
onChange	状态变化回调	function(checked: boolean, value: any): void	null

Data 属性

属性	说明	类型	默认值
data-checkbox	启用自动初始化	boolean	-
data-label	标签文本	string	''
data-value	选项值	string	-
data-checked	是否选中	boolean	false
data-disabled	是否禁用	boolean	false

方法

方法名	说明	参数	返回值
setChecked(checked)	设置选中状态	checked: boolean	void
getChecked()	获取选中状态	-	boolean
getValue()	获取选项值	-	any
setDisabled(disabled)	设置禁用状态	disabled: boolean	void
destroy()	销毁实例	-	void

实际使用场景

场景 1：全选功能

使用复选框实现全选/取消全选功能。

<div style="margin-bottom: 1rem;">
  <label class="sa-checkbox" id="select-all" data-checkbox="true" data-label="全选" data-value="all"></label>
</div>

<div id="checkbox-list"></div>

<script>
  SA.init('body');
  
  const items = ['选项一', '选项二', '选项三', '选项四', '选项五'];
  const checkboxes = [];
  
  items.forEach((label, index) => {
    const container = document.createElement('div');
    container.style.marginBottom = '0.5rem';
    document.getElementById('checkbox-list').appendChild(container);
    
    const checkbox = new SaCheckbox(container, {
      label: label,
      value: `option${index + 1}`,
      onChange: () => {
        updateSelectAll();
      }
    });
    
    checkboxes.push(checkbox);
  });
  
  const selectAll = document.getElementById('select-all')._saCheckboxInstance;
  
  selectAll.config.onChange = (checked) => {
    checkboxes.forEach(cb => cb.setChecked(checked));
  };
  
  function updateSelectAll() {
    const allChecked = checkboxes.every(cb => cb.getChecked());
    const someChecked = checkboxes.some(cb => cb.getChecked());
    
    if (allChecked) {
      selectAll.setChecked(true);
    } else if (someChecked) {
      selectAll.setChecked(false);
      selectAll.input.indeterminate = true;
    } else {
      selectAll.setChecked(false);
      selectAll.input.indeterminate = false;
    }
  }
</script>

加载 SanoUI 组件中...