本文介绍多项选择器(checkbox)。

checkbox-group

多项选择器组。

属性名 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据。 -
onChange EventHandle - 选中项发生改变时触发。
detail = {value: 选中的 checkbox 项 value 的值}
-

checkbox

多选项目。

属性名 类型 默认值 描述 最低版本
value String - 组件值,选中时 change 事件会携带的 value 。 -
checked Boolean false 当前是否选中,可用来设置默认选中 。 -
disabled Boolean false 是否禁用 。 -
onChange EventHandle - 组件发生改变时触发。
detail = {value: 该 checkbox 是否 checked}
-
color Color - checkbox 的颜色。 1.10.0

图示

代码示例

  1. // acss
  2. .checkbox {
  3. display: block;
  4. margin-bottom: 20rpx;
  5. }
  6. .checkbox-text {
  7. font-size:34rpx;
  8. line-height: 1.2;
  9. }
  1. <checkbox-group onChange="onChange">
  2. <label class="checkbox" a:for="{{items}}">
  3. <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
  4. <text class="checkbox-text">{{item.value}}</text>
  5. </label>
  6. </checkbox-group>
  1. Page({
  2. data: {
  3. items: [
  4. {name: 'angular', value: 'AngularJS'},
  5. {name: 'react', value: 'React', checked: true},
  6. {name: 'polymer', value: 'Polymer'},
  7. {name: 'vue', value: 'Vue.js'},
  8. {name: 'ember', value: 'Ember.js'},
  9. {name: 'backbone', value: 'Backbone.js', disabled: true},
  10. ],
  11. },
  12. onChange(e) {
  13. my.alert({
  14. title: `你选择的框架是 ${e.detail.value}`,
  15. });
  16. },
  17. });