跳到主要内容
Checkbox
复选框用于在列表中选择多个项时，用户可以选择零个、一个或任意数量的项目。
用法
样式
可访问性

示例​

注意​

本组件是Checkbox组，而不是单个的Checkbox。

基础用法​

Checkbox 多选组有三种状态：默认、选中、禁用。对单个checkbox支持配置tips添加说明。禁用和提示在data中配置。

PCPhonePad
   <page>
     <module title="基础用法">
       <form>
           <item
             label="你喜欢什么瓜？"
             node="checkbox"
             name="a"
             data="{[
               {value: 1, label: '选择呆瓜',  tips: '呆瓜详细说明'},
               {value: 2, label: '选择西瓜', disabled: true},
               {value: 3, label: '选择傻瓜'}
             ]}"
           />
           <item
             label="你喜欢什么蛋？"
             node="checkbox"
             name="b"
             value="{[1, 2]}"
             data="{[
               {value: 1, label: '选择笨蛋'},
               {value: 2, label: '选择鸡蛋', disabled: true},
               {value: 3, label: '选择傻蛋'}
             ]}"
           />
         </form>
       </module>    
   </page>

export default XPage({
    data: {},
    show() {}
});


展示类型​

Checkbox 多选组支持多种展示类型，当displayType为image时data中需要配置url。

PCPhonePad
<page>
  <module title="切换展示类型(displayType)">
    <actions>
      <button text="默认复选框(checkbox)" bindclick="changeDisplayType('normal')"></button>
      <button text="按钮组(button)" bindclick="changeDisplayType('button')"></button>
      <button text="分开的按钮组(split-button)" bindclick="changeDisplayType('split-button')"></button>
      <button text="图片(image)" bindclick="changeDisplayType('image')"></button>
      <button text="卡片(card)" bindclick="changeDisplayType('card')"></button>
    </actions>
    <form>
      <item node="checkbox" label-size={{0}} value="{{defaultValue}}" data="{{options}}" display-type="{{displayType}}" ></item>
      <item node="checkbox" label-size={{0}} value="{{defaultValue}}" data="{{options}}" display-type="{{displayType}}" ></item>
    </form>
  </module>
</page>


export default XPage({
  data: {
      displayType: 'button',
      options: [
          {
              label: '苹果',
              value: '1',
              description: '酸酸甜甜',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '橘子',
              value: '2',              
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '西瓜',
              value: '3',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '猪肉',
              value: '4',
              disabled: true,
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '草莓',
              value: '5',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '压力',
              value: '7',
              disabled: true,
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
          {
              label: '鸭梨',
              value: '8',
              url:'https://testimage-1256468630.cos.ap-beijing.myqcloud.com/ware/0f1ee4381b584119828261b79e42b024/screenshot-20220507-092953.png'
          },
      ],
      defaultValue: ['2'],
      message: '',
  },
  changeDisplayType(type) {
      this.setData({
          displayType: type,
      });
  },
});



布局​

Checkbox 多选组支持水平和垂直两种布局。itemWidth属性可控制每个checkbox的宽度。

PCPhonePad
  <page>
    <module title="切换布局和宽度(layout和item宽度)">
      <actions>
        <select placeholder="请选择layout" 
                data="{[{label:'横',value:'horizontal'},{label:'竖',value:'vertical'}]}" 
                bindchanged="changeLayout">
        </select>
        <select placeholder="请选择宽度" 
                data="{[{label:'S(108px)',value:'S'},{label:'M(144px)',value:'M'},{label:'L(216px)',value:'L'},{label:'auto(不固定宽度)',value:'auto'}]}" 
                bindchanged="changeItemWidth">
        </select>
      </actions>
      <form>
        <item node="checkbox" label="水果" value="{{defaultValue}}" data="{{options}}" layout="{{layout}}" itemWidth="{{itemWidth}}"></item>
      </form>
    </module>
  </page>


export default XPage({
  data: {
      options: [
          {
              label: '苹果',
              value: '1',
              description: '酸酸甜甜'
          },
          {
              label: '橘子',
              value: '2',
          },
          {
              label: '西瓜',
              value: '3',
          },
          {
              label: '猪肉',
              value: '4',
              disabled: true,
          },
          {
              label: '草莓',
              value: '5',
          },
          {
              label: '压力',
              value: '7',
              disabled: true,
          },
          {
              label: '鸭梨',
              value: '8',
          },
      ],
      defaultValue: ['2'],
      layout:'horizontal',
      itemWidth:'S'
  },
  show() {
  },
  changeItemWidth(itemWidth) {
    this.setData({itemWidth:itemWidth});
      
  },
  changeLayout(layout){
    this.setData({layout:layout});
  }
});



Attributes​

属性说明类型可选值默认值端版本
name名称String----PC/Mobile--
value绑定值Array----PC/Mobile--
data选项Array<{label, value, disabled, tips, url, description}>----PC/Mobile--
disabled禁用Boolean--falsePC/Mobile--
displayType显示的样式(button/checkbox/card)Stringnormal/button/split-button/image/cardnormalPC--
layout排列方式(横竖)Stringhorizontal/verticalhorizontalPC--
itemWidth选项的宽度StringS(108px)/M(144px)/L(216px)/auto(选项宽度)SPC--
notCabinxTag如果需要用原生标签，可以使用这个参数，编译器将不会对 checkbox 转成 x-checkbox 。注意，这个标签只在命令行编译阶段生效，而不是运行阶段，所以，赋值对他是没有用的------PC/Mobile--

Attributes - data​

属性说明类型可选值默认值端版本
label文案String----PC/Mobile--
value值String----PC/Mobile--
disabled禁用Boolean--falsePC/Mobile--
tips提示String----PC--
url图片地址，当displayType为image时有用String----PC--
description描述String----PC--

Events​

名称说明回调参数端版本
changed值改变后触发(value, [{label,value,...}])PC/Mobile--