AMCheckBox 复选框

复选框。

扫码体验：
AMCheckBox 复选框 - 图1

属性名描述类型默认值必选
value组件值，选中时 change 事件会携带的 valueStringfalse
checked当前是否选中，可用来设置默认选中Booleanfalsefalse
disabled是否禁用Booleanfalsefalse
onChangechange 事件触发的回调函数(e: Object) => voidfalse
id与label组件的for属性组合使用Stringfalse

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "list": "mini-antui/es/list/index",
  5.     "list-item": "mini-antui/es/list/list-item/index",
  6.     "am-checkbox": "mini-antui/es/am-checkbox/index"
  7.   }
  8. }
  1. <list>
  2.   <view slot="header">
  3.     列表+复选框
  4.   </view>
  5.   <block a:for="{{items}}">
  6.     <list-item
  7.       thumb=""
  8.       arrow="{{false}}"
  9.       index="{{index}}"
  10.       key="items-{{index}}"
  11.       last="{{index === (items.length - 1)}}"
  12.     >
  13.       <view slot="prefix" style="display: flex; align-items: center;">
  14.         <am-checkbox id="{{item.id}}" data-name="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" onChange="onChange" />
  15.       </view>
  16.       <label for="{{item.id}}">{{item.title}}</label>
  17.     </list-item>
  18.   </block>
  19. </list>
  20. <view style="padding: 16px;">
  21.   <view style="color: #888; font-size: 14px;">
  22.     协议
  23.   </view>
  24.   <view style="margin-top: 10px;">
  25.     <label style="display: flex; line-height: 24px;">
  26.       <am-checkbox />
  27.       <text style="text-indent: 8px; color: #888">同意 《信用支付服务合同》</text>
  28.     </label>
  29.   </view>
  30. </view>
  31. <view style="padding: 16px; background-color: #fff;">
  32.   <form onSubmit="onSubmit" onReset="onReset">
  33.     <view>
  34.       <view style="color: #666; font-size: 14px; margin-bottom: 5px;">选择你用过的框架：</view>
  35.       <view>
  36.         <checkbox-group name="libs">
  37.           <label a:for="{{items2}}" style="display: flex; align-items: center; height: 30px;">
  38.             <am-checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  39.             <text style="color: #888; font-size: 14px; margin-left: 8px;">{{item.value}}</text>
  40.           </label>
  41.         </checkbox-group>
  42.       </view>
  43.       <view style="margin-top: 10px;">
  44.         <button type="primary" size="mini" formType="submit">submit</button>
  45.       </view>
  46.     </view>
  47.   </form>
  48. </view>
  1. Page({
  2.   data: {
  3.     items: [
  4.       { checked: true, disabled: false, value: 'a', title: '复选框-默认选中', id: 'checkbox1' },
  5.       { checked: false, disabled: false, value: 'b', title: '复选框-默认未选中', id: 'checkbox2' },
  6.       { checked: true, disabled: true, value: 'c', title: '复选框-默认选中disabled', id: 'checkbox3' },
  7.       { checked: false, disabled: true, value: 'd', title: '复选框-默认未选中disabled', id: 'checkbox4' },
  8.     ],
  9.     items2: [
  10.       { name: 'react', value: 'React', checked: true },
  11.       { name: 'vue', value: 'Vue.js' },
  12.       { name: 'ember', value: 'Ember.js' },
  13.       { name: 'backbone', value: 'Backbone.js', disabled: true },
  14.     ],
  15.   },
  16.   onSubmit(e) {
  17.     my.alert({
  18.       content: `你选择的框架是 ${e.detail.value.libs.join(', ')}`,
  19.     });
  20.   },
  21.   onReset() {},
  22.   onChange(e) { console.log(e); },
  23. });

原文: https://docs.alipay.com/mini/component-ext/am-checkbox