支付宝小程序表单组件 多选项目·Checkbox

2020-09-10 11:17 更新

多选项目。

说明:

  • checkbox 没有源码。
  • checkbox 不支持修改选中的背景颜色样式。

扫码体验

示例代码

<!-- API-DEMO page/component/checkbox/checkbox.axml -->
<view class="page">
  <view class="page-description">多项选择器</view>
  <form onSubmit="onSubmit" onReset="onReset">
    <view class="page-section">
      <view class="page-section-title">选择你用过的框架:</view>
      <view class="page-section-demo">
        <checkbox-group onChange="onChange" name="libs">
          <label class="checkbox" a:for="{{items}}" key="label-{{index}}">
            <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
            <text class="checkbox-text">{{item.value}}</text>
          </label>
        </checkbox-group>
      </view>
      <view class="page-section-btns">
        <view><button type="ghost" size="mini" formType="reset">reset</button></view>
        <view><button type="primary" size="mini" formType="submit">submit</button></view>
      </view>
    </view>
  </form>
</view>
// API-DEMO page/component/checkbox/checkbox.js
Page({
  data: {
    items: [
      { name: 'angular', value: 'AngularJS' },
      { name: 'react', value: 'React', checked: true },
      { name: 'polymer', value: 'Polymer' },
      { name: 'vue', value: 'Vue.js' },
      { name: 'ember', value: 'Ember.js' },
      { name: 'backbone', value: 'Backbone.js', disabled: true },
    ],
  },
  onSubmit(e) {
    console.log('onSubmit', e);
    my.alert({
      content: `你选择的框架是 ${e.detail.value.libs.join(', ')}`,
    });
  },
  onReset(e) {
    console.log('onReset', e);
  },
  onChange(e) {
    console.log(e);
  },
});
/* API-DEMO page/component/checkbox/checkbox.acss */
.checkbox {
  display: block;
  margin-bottom: 20rpx;
}


button + button {
  margin-top: 32rpx;
}


.checkbox-text {
  font-size:34rpx;
  line-height: 1.2;
}

属性

属性 类型 默认值 描述 最低版本
value String - 组件值,选中时 change 事件会携带的 value。 -
checked Boolean false 当前是否选中,可用来设置默认选中。 -
disabled Boolean false 是否禁用。 -
onChange EventHandle - 组件发生改变时触发,detail = {value: 该 checkbox 是否 checked }。 -
color String - checkbox 的颜色,同 CSS 色值。 1.10.0
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号