AMCheckBox

// API-DEMO page/component/am-checkbox/am-checkbox.json
{
  "defaultTitle": "Mini Program AntUI component library",
  "usingComponents": {
    "list": "mini-antui/es/list/index",
    "list-item": "mini-antui/es/list/list-item/index",
    "am-checkbox": "mini-antui/es/am-checkbox/index"
  }
}

<!-- API-DEMO page/component/am-checkbox/am-checkbox.axml -->
<list>
  <view slot="header">
    List + Checkbox
  </view>
  <block a:for="{{items}}">
    <list-item
      thumb=""
      arrow="{{false}}"
      index="{{index}}"
      key="items-{{index}}"
      last="{{index === (items.length - 1)}}"
    >
      <view slot="prefix" style="display: flex; align-items: center;">
        <am-checkbox id="{{item.id}}" data-name="{{item.value}}" disabled="{{item.disabled}}" checked="{{item.checked}}" onChange="onChange" />
      </view>
      <label for="{{item.id}}">{{item.title}}</label>
    </list-item>
  </block>
</list>
<view style="padding: 16px;">
  <view style="color: #888; font-size: 14px;">
    Protocol
  </view>
  <view style="margin-top: 10px;">
    <label style="display: flex; line-height: 24px;">
      <am-checkbox />
      <text style="text-indent: 8px; color: #888">Agree with Credit Payment Service Contract</text>
    </label>
  </view>
</view>
<view style="padding: 16px; background-color: #fff;">
  <form onSubmit="onSubmit" onReset="onReset">
    <view>
      <view style="color: #666; font-size: 14px; margin-bottom: 5px;">Select the framework you have used:</view>
      <view>
        <checkbox-group name="libs">
          <label a:for="{{items2}}" style="display: flex; align-items: center; height: 30px;">
            <am-checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
            <text style="color: #888; font-size: 14px; margin-left: 8px;">{{item.value}}</text>
          </label>
        </checkbox-group>
      </view>
      <view style="margin-top: 10px;">
        <button type="primary" size="mini" formType="submit">submit</button>
      </view>
    </view>
  </form>
</view>

// API-DEMO page/component/am-checkbox/am-checkbox.js
Page({
  data: {
    items: [
      { checked: true, disabled: false, value: 'a', title: 'Checkbox - Checked by default', id: 'checkbox1' },
      { checked: false, disabled: false, value: 'b', title: 'Checkbox - Unchecked by default', id: 'checkbox2' },
      { checked: true, disabled: true, value: 'c', title: 'Checkbox - disabled checked by default', id: 'checkbox3' },
      { checked: false, disabled: true, value: 'd', title: 'Checkbox - disabled unchecked by default', id: 'checkbox4' },
    ],
    items2: [
      { name: 'react', value: 'React', checked: true },
      { name: 'vue', value: 'Vue.js' },
      { name: 'ember', value: 'Ember.js' },
      { name: 'backbone', value: 'Backbone.js', disabled: true },
    ],
  },
  onSubmit(e) {
    my.alert({
      content: `You are selecting the framework ${e.detail.value.libs.join(', ')}`,
    });
  },
  onReset() {},
  onChange(e) { console.log(e); },
});