All Products
Search
Document Center

Mobile Platform as a Service:checkbox

Last Updated:Jul 17, 2023

This topic describes the multi-choice selector, that is, checkbox.

This topic describes the multi-choice selector, that is, checkbox.

checkbox-group

The multi-selector group.

Attribute

Type

Default value

Description

Minimum version

name

String

-

The component name, which is used to submit the form to obtain data.

-

onChange

EventHandle

-

Trigger when the selected item is modified, where detail = {value: The value of the selected checkbox item}.

-

checkbox

The multi-choice item.

Attribute

Type

Default value

Description

Minimum version

value

String

-

The component value, which is the value carried by the change event when the component is selected.

-

checked

Boolean

false

Whether the current item is selected. You can use this attribute to set the item as selected by default.

-

disabled

Boolean

false

Whether to disable the button.

-

onChange

EventHandle

-

Trigger when the component is modified, where detail = {value: Whether this checkbox is selected}.

-

color

Color

-

The checkbox color.

1.10.0

Illustration

image.png

Sample code

// acss
.checkbox {
  display: block;
  margin-bottom: 20rpx;
}

.checkbox-text {
  font-size:34rpx;
  line-height: 1.2;
}
<checkbox-group onChange="onChange">
  <label class="checkbox" a:for="{{items}}">
    <checkbox value="{{item.name}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
    <text class="checkbox-text">{{item.value}}</text>
  </label>
</checkbox-group>
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},
    ],
  },
  onChange(e) {
    my.alert({
      title: `You have selected the ${e.detail.value} framework`,
    });
  },
});