title: 复选框 Checkbox

复选框组件 Checkbox-Group

单项选择器，与原生组件Checkbox-Group用法类似，内部由多个l-checkbox组件组成。

复选框 Checkbox

单选项目，与原生组件Checkbox用法类似,内部传入slot。与Checkbox-Group搭配使用。

基础案例

单项选择器内部由多个l-checkbox组成，linchange事件能监听到选中项的变化。

示例代码

<l-checkbox-group bind:linchange="onChangeTap" >
  <l-checkbox
    wx:for-items="{{items}}"
    wx:key="{{item.value}}"
    key="{{item.value}}"
    checked="{{item.isChecked}}"
    disabled="{{item.disabled}}">
    {{item.value}}
  </l-checkbox>
</l-checkbox-group>

  data: {
    items: [
      { value: '美国', isChecked: false, disabled: false },
      { value: '中国', isChecked: false, disabled: false },
      { value: '巴西', isChecked: false, disabled: false },
      { value: '日本', isChecked: false, disabled: false },
      { value: '英国', isChecked: false, disabled: false },
      { value: '法国', isChecked: false, disabled: false },
    ]
  }

单个Checkbox布局方式

根据具体需求，选择最佳的标签对齐方式（选中图标和内容部分）。

placement 默认值是 left ，即Checkbox的选中图标居左显示。值为 right 时，图标居右显示。

多个Checkbox布局方式

根据具体需求，选择最佳的多个Checkbox组件对齐方式，需要设置Checkbox-Group组件的placement属性。

placement 默认值是 column ，可选项为 row/column。

示例代码

<l-checkbox-group bind:linchange="onChangeTap" >
  <l-checkbox  placement="right"  key="1">中国</l-checkbox>
  <l-checkbox  placement="right"  key="2">美国</l-checkbox>
</l-checkbox-group>

设置选中项的颜色

当我们需要改变checkbox选中时的颜色时，可以通过color 属性来设置

示例代码

<l-checkbox key="中国"  color="red" >中国</l-checkbox>
<l-checkbox key="美国"  selected-color="blue">美国</l-checkbox>
<l-checkbox key="日本"  disabled-color="#333">日本</l-checkbox>

设置禁用

当我们需要将某一个选项禁用时，设置 disabled 为 true 即可。

示例代码

<l-checkbox key="中国"  disabled="{{true}}" >中国</l-checkbox>

更改Checkbox的大小

通过给checkbox的size属性设值可以改变checkbox的大小

示例代码

<l-checkbox-group bind:linchange="onChangeTap" >
  <l-checkbox size="42rpx" placement="right"  key="1">中国</l-checkbox>
  <l-checkbox size="42rpx"  placement="right"  key="2">美国</l-checkbox>
</l-checkbox-group>

自定义checkbox的按钮部分

通过 <slot> 的方式可以自定义Checkbox组件的按钮部分，在此之前需要将custom设置为{{true}}

示例代码

<l-checkbox key="中国" custom="{{true}}"  disabled="{{true}}" >
  <image class="checkbox-img" src="path/to/img.png" slot="icon"/>
  中国
</l-checkbox>

设置最多、最少选项

通过 min/max 两个属性来设置复选框 最少/最多 可选个数

示例代码

<l-checkbox-group bind:linchange="onChangeTap" min-selected="{{2}}" max-selected="{{4}}">
  <l-checkbox
    wx:for-items="{{items}}"
    wx:key="{{item.value}}"
    key="{{item.value}}"
    checked="{{item.isChecked}}"
    disabled="{{item.disabled}}">
    {{item.value}}
  </l-checkbox>
</l-checkbox-group>

  data: {
    items: [
      { value: '美国', isChecked: false, disabled: false },
      { value: '中国', isChecked: false, disabled: false },
      { value: '巴西', isChecked: false, disabled: false },
      { value: '日本', isChecked: false, disabled: false },
      { value: '英国', isChecked: false, disabled: false },
      { value: '法国', isChecked: false, disabled: false },
    ]
  }

复选框组件属性

复选框组件外部样式类（Checkbox ExternalClasses）

复选框组组件外部样式类（CheckboxGroup ExternalClasses）

复选框容器组件属性

复选框组件事件